@videojs/react 10.0.0-beta.31 → 10.0.0-beta.32

package/docs/concepts/skins.md

@@ -6,21 +6,14 @@ New in version 10
 
 In prior versions of Video.js, skins were CSS-only themes applied to the same set of default controls. In version 10 the concept of skins has been expanded to include the UI components, so each skin can be completely unique and only include the UI components it needs.
 
-tsx
+A skin wraps the media component and provides the player’s complete interface. It combines a specific set of UI components with the styles that arrange and present them.
 
-```
-<VideoPlayer>
-  <VideoSkin>
-    {/* wraps the Media component */}
-    <Video src="video.mp4"></Video>
-  </VideoSkin>
-</VideoPlayer>
-```
-
-## Packaged vs. ejected
+## Packaged and ejected skins
 
 When you choose a skin you have two options for how you use it: **packaged** or **ejected**. It’s usually easiest to start with a packaged skin and later eject its internal components into your project when you need more customization.
 
+Packaged skins cover common visual changes through documented CSS custom properties. Packaged video skins also let you replace the poster. When you need more than that, eject and change the components and styles directly.
+
 Packaged
 
 Ejected
@@ -29,31 +22,38 @@ Single component
 
 Many UI components
 
-Limited customization
+Documented CSS custom properties
 
-Complete customization
+Components and styles you own
 
 Future design updates auto-applied by bumping the version
 
 Future design updates manually applied, or intentionally ignored
 
-[Read more about ejecting skins](../how-to/customize-skins.md)
-
-[Read more about UI Components](./ui-components.md)
+### Packaged skin
 
-### Example of packaged
+Player.tsx
 
-tsx
+```
+import { Video, VideoPlayer, VideoSkin } from '@videojs/react/video';
+import '@videojs/react/video/skin.css';
 
-  ```
-  <VideoPlayer>
-    <VideoSkin>
-      {/* ...Media... */}
-    </VideoSkin>
-  </VideoPlayer>
+export function Player() {
+  return (
+    <VideoPlayer>
+      <VideoSkin>
+        <Video src="video.mp4" />
+      </VideoSkin>
+    </VideoPlayer>
+  );
+}
 ```
 
-### Example of ejected
+Don’t depend on elements, class names, or undocumented custom properties inside a packaged skin. They may change between releases.
+
+### Ejected skin
+
+An ejected skin exposes its UI components and styles as app code that you own. You can add, remove, rearrange, or restyle any part of it.
 
 VideoPlayer.tsx
 
@@ -90,7 +90,6 @@ function SettingsMenu(): ReactNode {
   const hasQuality = quality?.state.availability === 'available';
   const hasAudioTrack = audioTrack?.state.availability === 'available';
   const hasCaptions = captions?.state.availability === 'available';
-
   if (!hasPlaybackRate && !hasQuality && !hasAudioTrack && !hasCaptions) return null;
 
   return (
@@ -107,8 +106,8 @@ function SettingsMenu(): ReactNode {
           <Tooltip.Label>{t(settingsText)}</Tooltip.Label>
         </Tooltip.Popup>
       </Tooltip.Root>
-      <Menu.Content className="media-surface media-popover media-menu media-menu--settings">
-        <div className="media-menu__group">
+      <Menu.Popup className="media-surface media-popover media-menu media-menu--settings">
+        <Menu.Content className="media-menu__content">
           {hasQuality ? (
             <Menu.Root>
               <Menu.Trigger
@@ -268,8 +267,8 @@ function SettingsMenu(): ReactNode {
               </Menu.Content>
             </Menu.Root>
           ) : null}
-        </div>
-      </Menu.Content>
+        </Menu.Content>
+      </Menu.Popup>
     </Menu.Root>
   );
 }
@@ -390,105 +389,105 @@ export function VideoPlayer({ src, poster, className, renderPoster, style, ...re
         />
 
         <ErrorDialog.Root>
-          <ErrorDialog.Popup className="media-error">
-            <div className="media-error__dialog media-surface">
-              <div className="media-error__content">
-                <ErrorDialog.Title className="media-error__title"></ErrorDialog.Title>
-                <ErrorDialog.Description className="media-error__description" />
-              </div>
-              <div className="media-error__actions">
-                <ErrorDialog.Close className="media-button media-button--primary"></ErrorDialog.Close>
-              </div>
+          <ErrorDialog.Backdrop className="media-dialog__backdrop" />
+          <ErrorDialog.Popup className="media-dialog__popup media-surface">
+            <div className="media-dialog__content">
+              <ErrorDialog.Title className="media-dialog__title"></ErrorDialog.Title>
+              <ErrorDialog.Description className="media-dialog__description" />
+            </div>
+            <div className="media-dialog__actions">
+              <ErrorDialog.Close className="media-button media-button--primary"></ErrorDialog.Close>
             </div>
           </ErrorDialog.Popup>
         </ErrorDialog.Root>
 
-        <Controls.Root className="media-surface media-controls media-controls--root">
-          <Tooltip.Provider>
-            <div className="media-surface media-controls media-controls--primary">
-              <div className="media-button-group">
-                <Tooltip.Root side="top">
-                  <Tooltip.Trigger
-                    render={
-                      <PlayButton className="media-button--play" render={<Button />}>
-                        <RestartIcon className="media-icon media-icon--restart" />
-                        <PlayIcon className="media-icon media-icon--play" />
-                        <PauseIcon className="media-icon media-icon--pause" />
-                      </PlayButton>
-                    }
-                  />
-                  <Tooltip.Popup className="media-surface media-tooltip">
-                    <Tooltip.Label />
-                    <Tooltip.Shortcut className="media-tooltip__kbd" />
-                  </Tooltip.Popup>
-                </Tooltip.Root>
-
-                <VolumePopover />
-              </div>
-
-              <div className="media-time-controls">
-                <Time.Value type="current" className="media-time" />
-                <TimeSlider.Root className="media-slider">
-                  <TimeSlider.Chapters
-                    className="media-slider__chapters"
-                    renderChapter={(props) => (
-                      <div {...props} className={`${props.className} media-slider__chapter`}>
-                        <TimeSlider.Track className="media-slider__track media-slider__chapter-track">
-                          <TimeSlider.Buffer className="media-slider__buffer" />
-                          <TimeSlider.Fill className="media-slider__fill" />
-                        </TimeSlider.Track>
+        <Controls.Root>
+          <Controls.Backdrop className="media-controls__backdrop" />
+          <Controls.Content className="media-surface media-controls media-controls--root">
+            <Tooltip.Provider>
+              <Controls.Group className="media-surface media-controls media-controls--primary">
+                <div className="media-button-group">
+                  <Tooltip.Root side="top">
+                    <Tooltip.Trigger
+                      render={
+                        <PlayButton className="media-button--play" render={<Button />}>
+                          <RestartIcon className="media-icon media-icon--restart" />
+                          <PlayIcon className="media-icon media-icon--play" />
+                          <PauseIcon className="media-icon media-icon--pause" />
+                        </PlayButton>
+                      }
+                    />
+                    <Tooltip.Popup className="media-surface media-tooltip">
+                      <Tooltip.Label />
+                      <Tooltip.Shortcut className="media-tooltip__kbd" />
+                    </Tooltip.Popup>
+                  </Tooltip.Root>
+
+                  <VolumePopover />
+                </div>
+
+                <div className="media-time-controls">
+                  <Time.Value type="current" className="media-time" />
+                  <TimeSlider.Root className="media-slider">
+                    <TimeSlider.Chapters
+                      className="media-slider__chapters"
+                      renderChapter={(props) => (
+                        <div {...props} className={`${props.className} media-slider__chapter`}>
+                          <TimeSlider.Track className="media-slider__track media-slider__chapter-track">
+                            <TimeSlider.Buffer className="media-slider__buffer" />
+                            <TimeSlider.Fill className="media-slider__fill" />
+                          </TimeSlider.Track>
+                        </div>
+                      )}
+                    />
+                    <TimeSlider.Thumb className="media-slider__thumb" />
+
+                    <TimeSlider.Preview overflow="visible" className="media-slider__preview">
+                      <div className="media-surface media-thumbnail media-slider__thumbnail">
+                        <Slider.Thumbnail className="media-thumbnail__image" />
+                        <SpinnerIcon className="media-thumbnail__spinner media-icon" />
                       </div>
-                    )}
-                  />
-                  <TimeSlider.Thumb className="media-slider__thumb" />
-
-                  <TimeSlider.Preview overflow="visible" className="media-slider__preview">
-                    <div className="media-surface media-thumbnail media-slider__thumbnail">
-                      <Slider.Thumbnail className="media-thumbnail__image" />
-                      <SpinnerIcon className="media-thumbnail__spinner media-icon" />
-                    </div>
-                    <div className="media-slider__value">
-                      <TimeSlider.ChapterTitle className="media-slider__chapter-title" />
-                      <TimeSlider.Value type="pointer" className="media-time" />
-                    </div>
-                  </TimeSlider.Preview>
-                </TimeSlider.Root>
-                <Time.Value toggle type="remaining" className="media-time" />
-              </div>
-
-              <div className="media-button-group">
-                <Tooltip.Root side="top">
-                  <Tooltip.Trigger
-                    render={
-                      <CaptionsButton className="media-button--captions" render={<Button />}>
-                        <CaptionsOffIcon className="media-icon media-icon--captions-off" />
-                        <CaptionsOnIcon className="media-icon media-icon--captions-on" />
-                      </CaptionsButton>
-                    }
-                  />
-                  <Tooltip.Popup className="media-surface media-tooltip">
-                    <Tooltip.Label />
-                    <Tooltip.Shortcut className="media-tooltip__kbd" />
-                  </Tooltip.Popup>
-                </Tooltip.Root>
-
-                <SettingsMenu />
-              </div>
-            </div>
-
-            <div className="media-surface media-controls media-controls--secondary">
-              <div className="media-button-group">
-                <CastControl />
-                <AirPlayControl />
-                <PiPControl />
-                <FullscreenControl />
-              </div>
-            </div>
-          </Tooltip.Provider>
+                      <div className="media-slider__value">
+                        <TimeSlider.ChapterTitle className="media-slider__chapter-title" />
+                        <TimeSlider.Value type="pointer" className="media-time" />
+                      </div>
+                    </TimeSlider.Preview>
+                  </TimeSlider.Root>
+                  <Time.Value toggle type="remaining" className="media-time" />
+                </div>
+
+                <div className="media-button-group">
+                  <Tooltip.Root side="top">
+                    <Tooltip.Trigger
+                      render={
+                        <CaptionsButton className="media-button--captions" render={<Button />}>
+                          <CaptionsOffIcon className="media-icon media-icon--captions-off" />
+                          <CaptionsOnIcon className="media-icon media-icon--captions-on" />
+                        </CaptionsButton>
+                      }
+                    />
+                    <Tooltip.Popup className="media-surface media-tooltip">
+                      <Tooltip.Label />
+                      <Tooltip.Shortcut className="media-tooltip__kbd" />
+                    </Tooltip.Popup>
+                  </Tooltip.Root>
+
+                  <SettingsMenu />
+                </div>
+              </Controls.Group>
+
+              <Controls.Group className="media-surface media-controls media-controls--secondary">
+                <div className="media-button-group">
+                  <CastControl />
+                  <AirPlayControl />
+                  <PiPControl />
+                  <FullscreenControl />
+                </div>
+              </Controls.Group>
+            </Tooltip.Provider>
+          </Controls.Content>
         </Controls.Root>
 
-        <div className="media-overlay" />
-
         {/* Hotkeys */}
         <Hotkey keys="Space" action="togglePaused" />
         <Hotkey keys="k" action="togglePaused" />
@@ -517,7 +516,7 @@ export function VideoPlayer({ src, poster, className, renderPoster, style, ...re
 
         {/* Input Indicators */}
         <StatusAnnouncer className="media-sr-only" />
-        <div className="media-input-indicator-overlay">
+        <div className="media-input-indicator">
           <VolumeIndicator.Root className="media-surface media-volume-indicator">
             <VolumeIndicator.Fill className="media-volume-indicator__content">
               <VolumeHighIcon className="media-icon media-icon--volume-high" />
@@ -650,34 +649,37 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
 .media-default-skin {
   /* Colors */
-  --accent-color: var(--media-accent-color, var(--default-accent-color));
-  --accent-contrast-color: contrast-color(var(--accent-color));
-  --accent-background-color: var(
+  --media-internal-accent-color: var(--media-accent-color, var(--media-default-accent-color));
+  --media-accent-contrast-color: contrast-color(var(--media-internal-accent-color));
+  --media-accent-background-color: var(
     --media-accent-color,
-    oklch(from var(--default-accent-color) l c h / calc(alpha * 0.1))
+    oklch(from var(--media-default-accent-color) l c h / calc(alpha * 0.1))
   );
-  --accent-text-color: var(--media-accent-text-color, contrast-color(var(--media-accent-color, oklch(0 0 0))));
-  --shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
-  --shadow-subtle-current-color: oklch(from var(--shadow-current-color) l c h / calc(alpha * 0.4));
-  --scrollbar-thumb-color: oklch(from currentColor l c h / 0.3);
+  --media-internal-accent-text-color: var(
+    --media-accent-text-color,
+    contrast-color(var(--media-accent-color, oklch(0 0 0)))
+  );
+  --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
+  --media-shadow-subtle-current-color: oklch(from var(--media-shadow-current-color) l c h / calc(alpha * 0.4));
+  --media-scrollbar-thumb-color: oklch(from currentColor l c h / 0.3);
 
   /* Scaling - used in video fullscreen to scale the UI. */
-  --scale: 1;
+  --media-scale: 1;
   /* Fixed scaling unit to avoid inheriting the document's root font size. This must be a CSS <length>. */
-  --scale-unit: var(--media-scale-unit, 16px);
-  --size: calc(var(--scale-unit) * var(--scale));
+  --media-internal-scale-unit: var(--media-scale-unit, 16px);
+  --media-size: calc(var(--media-internal-scale-unit) * var(--media-scale));
   /* Create a Tailwind-like spacing unit where 1 equals 4px with default scaling. */
-  --spacing: calc(var(--size) / 4);
+  --media-spacing: calc(var(--media-size) / 4);
 
   /* Font sizes */
-  --font-size-medium: calc(0.9375 * var(--size)); /* 15px */
-  --font-size-base: calc(0.8125 * var(--size)); /* 13px */
-  --font-size-small: calc(0.6875 * var(--size)); /* 11px */
-  --font-size-tiny: calc(0.5625 * var(--size)); /* 9px */
-  --media-icon-size: calc(1.125 * var(--size)); /* 18px */
+  --media-font-size-medium: calc(0.9375 * var(--media-size)); /* 15px */
+  --media-font-size-base: calc(0.8125 * var(--media-size)); /* 13px */
+  --media-font-size-small: calc(0.6875 * var(--media-size)); /* 11px */
+  --media-font-size-tiny: calc(0.5625 * var(--media-size)); /* 9px */
+  --media-icon-size: calc(1.125 * var(--media-size)); /* 18px */
 
   /* Radii */
-  --container-border-radius: var(--media-border-radius, 1.75rem);
+  --media-container-border-radius: var(--media-border-radius, 1.75rem);
 
   position: relative;
   display: block;
@@ -690,44 +692,44 @@ export const { Player } = createPlayer({ features: videoFeatures });
     ui-sans-serif,
     system-ui,
     sans-serif;
-  font-size: var(--font-size-base);
+  font-size: var(--media-font-size-base);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   line-height: 1.5;
   letter-spacing: normal;
   outline: 2px solid transparent;
   outline-offset: -4px;
-  scrollbar-color: var(--scrollbar-thumb-color) transparent;
+  scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
   scrollbar-width: thin;
-  border-radius: var(--container-border-radius, 1.75rem);
+  border-radius: var(--media-container-border-radius, 1.75rem);
   isolation: isolate;
   transition-timing-function: ease-out;
   transition-duration: 100ms;
   transition-property: outline-offset, outline-color;
 
   &:focus-visible {
-    outline-color: var(--focus-ring-color);
+    outline-color: var(--media-focus-ring-color);
     outline-offset: 2px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb-color);
+    background: var(--media-scrollbar-thumb-color);
     border-radius: 9999px;
   }
 
   @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
-    --scrollbar-thumb-color: oklch(from currentColor l c h / 0.8);
+    --media-scrollbar-thumb-color: oklch(from currentColor l c h / 0.8);
     scrollbar-width: auto;
   }
 }
 
 .media-default-skin .media-surface {
-  background-color: var(--surface-background-color);
+  background-color: var(--media-surface-background-color);
   box-shadow:
-    0 0 0 1px var(--surface-outer-border-color),
-    0 1px 3px 0 var(--surface-shadow-color),
-    0 1px 2px -1px var(--surface-shadow-color);
-  backdrop-filter: var(--surface-backdrop-filter);
+    0 0 0 1px var(--media-surface-outer-border-color),
+    0 1px 3px 0 var(--media-surface-shadow-color),
+    0 1px 2px -1px var(--media-surface-shadow-color);
+  backdrop-filter: var(--media-surface-backdrop-filter);
 
   /* Inner border ring */
   &::after {
@@ -738,8 +740,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
     content: "";
     border-radius: inherit;
     box-shadow:
-      inset 0 1px 0 0 var(--surface-inner-border-color),
-      inset 0 0 0 1px oklch(from var(--surface-inner-border-color) l c h / calc(alpha * 0.5));
+      inset 0 1px 0 0 var(--media-surface-inner-border-color),
+      inset 0 0 0 1px oklch(from var(--media-surface-inner-border-color) l c h / calc(alpha * 0.5));
   }
 }
 
@@ -752,7 +754,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
   object-position: var(--media-object-position, center);
 }
 .media-default-skin ::slotted(video) {
-  border-radius: var(--container-border-radius);
+  border-radius: var(--media-container-border-radius);
 }
 .media-default-skin video {
   border-radius: inherit;
@@ -763,37 +765,21 @@ export const { Player } = createPlayer({ features: videoFeatures });
   object-fit: contain;
 }
 
-.media-default-skin .media-overlay {
+.media-default-skin .media-controls__backdrop {
   position: absolute;
   inset: 0;
+  z-index: 10;
   pointer-events: none;
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3) 25%, oklch(0 0 0 / 0));
   border-radius: inherit;
   opacity: 0;
-  backdrop-filter: blur(0) saturate(1);
   transition-timing-function: ease-out;
-  transition-duration: var(--controls-transition-duration);
-  transition-property: opacity, backdrop-filter;
-}
+  transition-duration: var(--media-controls-transition-duration);
+  transition-property: opacity;
 
-.media-default-skin .media-error ~ .media-overlay {
-  transition-delay: var(--error-dialog-transition-delay);
-  transition-duration: var(--error-dialog-transition-duration);
-}
-
-.media-default-skin .media-controls[data-visible] ~ .media-overlay,
-.media-default-skin .media-error[data-open] ~ .media-overlay {
-  opacity: 1;
-}
-
-.media-default-skin .media-buffering-indicator[data-visible] ~ .media-overlay {
-  background: oklch(0 0 0 / 0.35);
-  opacity: 1;
-  backdrop-filter: blur(8px);
-}
-
-.media-default-skin .media-error[data-open] ~ .media-overlay {
-  backdrop-filter: blur(16px) saturate(1.5);
+  &[data-visible] {
+    opacity: 1;
+  }
 }
 
 .media-default-skin .media-buffering-indicator {
@@ -805,6 +791,19 @@ export const { Player } = createPlayer({ features: videoFeatures });
   color: oklch(1 0 0);
   pointer-events: none;
 
+  &::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    background: oklch(0 0 0 / 0.35);
+    backdrop-filter: blur(8px);
+  }
+
+  > * {
+    position: relative;
+    z-index: 20;
+  }
+
   &:not([data-visible]) {
     --media-spinner-animation: none;
   }
@@ -818,48 +817,83 @@ export const { Player } = createPlayer({ features: videoFeatures });
   }
 }
 
-.media-default-skin .media-error {
-  outline: none;
-}
+.media-default-skin {
+  media-error-dialog {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
 
-.media-default-skin .media-error:not([data-open]) {
-  display: none;
-}
+    &:not([data-open]) {
+      display: none;
+    }
+  }
 
-.media-default-skin .media-error__title {
-  font-weight: 600;
-  line-height: 1.25;
-}
+  .media-dialog__backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    pointer-events: none;
+    background: oklch(0 0 0 / 0.2);
+    backdrop-filter: blur(16px) saturate(1.5);
+    opacity: 1;
+    transition-timing-function: var(--media-dialog-transition-timing-function);
+    transition-duration: var(--media-dialog-transition-duration);
+    transition-property: opacity;
+    transition-delay: var(--media-dialog-transition-delay);
 
-.media-default-skin .media-error__description {
-  overflow-wrap: anywhere;
-  opacity: 0.7;
-}
+    &[data-starting-style],
+    &[data-ending-style] {
+      opacity: 0;
+    }
 
-.media-default-skin .media-error__actions {
-  display: flex;
-  gap: calc(var(--spacing) * 2);
+    &[data-ending-style] {
+      transition-delay: 0ms;
+    }
 
-  > * {
-    flex: 1;
+    &:not([data-open]) {
+      display: none;
+    }
   }
-}
 
-.media-default-skin .media-error[data-open] ~ .media-controls * {
-  visibility: hidden;
+  .media-dialog__popup {
+    outline: none;
+  }
+
+  .media-dialog__title {
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  .media-dialog__description {
+    overflow-wrap: anywhere;
+    opacity: 0.7;
+  }
+
+  .media-dialog__actions {
+    display: flex;
+    gap: calc(var(--media-spacing) * 2);
+
+    > * {
+      flex: 1;
+    }
+  }
 }
 
 .media-default-skin .media-controls {
-  --media-popover-side-offset: calc(var(--spacing) * (var(--base-side-offset, 2) + 1));
+  --media-popover-side-offset: calc(var(--media-spacing) * (var(--media-base-side-offset, 2) + 1));
   --media-tooltip-side-offset: var(--media-popover-side-offset);
-  --media-popover-boundary-offset: calc(var(--spacing) * var(--base-boundary-offset, 2));
+  --media-popover-boundary-offset: calc(var(--media-spacing) * var(--media-base-boundary-offset, 2));
   --media-tooltip-boundary-offset: var(--media-popover-boundary-offset);
 
   display: flex;
   align-items: center;
-  padding: calc(var(--spacing) * 1);
+  padding: calc(var(--media-spacing) * 1);
   container: media-controls / inline-size;
-  text-shadow: 0 1px 0 var(--shadow-current-color);
+  text-shadow: 0 1px 0 var(--media-shadow-current-color);
   border-radius: calc(Infinity * 1px);
 
   &:dir(rtl) {
@@ -870,7 +904,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
 .media-default-skin .media-time-controls {
   display: flex;
   flex: 1;
-  gap: calc(var(--spacing) * 2.5);
+  gap: calc(var(--media-spacing) * 2.5);
   align-items: center;
   container: media-time-controls / inline-size;
 
@@ -893,13 +927,13 @@ export const { Player } = createPlayer({ features: videoFeatures });
   cursor: pointer;
   outline: 2px solid transparent;
   outline-offset: -2px;
-  border-radius: calc(var(--spacing) * 1);
+  border-radius: calc(var(--media-spacing) * 1);
   transition-timing-function: ease-out;
   transition-duration: 100ms;
   transition-property: outline-color, outline-offset;
 
   &:focus-visible {
-    outline-color: var(--focus-ring-color);
+    outline-color: var(--media-focus-ring-color);
     outline-offset: 2px;
   }
 }
@@ -910,9 +944,9 @@ export const { Player } = createPlayer({ features: videoFeatures });
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  height: calc(var(--spacing) * 9);
+  height: calc(var(--media-spacing) * 9);
   min-height: 0;
-  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+  padding: calc(var(--media-spacing) * 2) calc(var(--media-spacing) * 4);
   text-align: center;
   touch-action: manipulation;
   cursor: pointer;
@@ -928,7 +962,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
   will-change: scale;
 
   &:focus-visible {
-    outline-color: var(--focus-ring-color);
+    outline-color: var(--media-focus-ring-color);
     outline-offset: 2px;
   }
 
@@ -945,9 +979,9 @@ export const { Player } = createPlayer({ features: videoFeatures });
 /* Primary button variant */
 .media-default-skin .media-button--primary {
   font-weight: 500;
-  color: var(--accent-contrast-color);
+  color: var(--media-accent-contrast-color);
   text-shadow: none;
-  background: var(--accent-color);
+  background: var(--media-internal-accent-color);
 }
 
 /* Subtle button variant */
@@ -960,9 +994,9 @@ export const { Player } = createPlayer({ features: videoFeatures });
     &:hover,
     &:focus-visible,
     &[aria-expanded="true"] {
-      color: var(--accent-text-color);
+      color: var(--media-internal-accent-text-color);
       text-decoration: none;
-      background-color: var(--accent-background-color);
+      background-color: var(--media-accent-background-color);
     }
   }
 }
@@ -983,7 +1017,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
   .media-icon {
     grid-area: 1 / 1;
-    filter: drop-shadow(0 1px 0 var(--shadow-current-color));
+    filter: drop-shadow(0 1px 0 var(--media-shadow-current-color));
     transition-timing-function: ease-out;
     transition-duration: 150ms;
     transition-property: opacity, scale;
@@ -1043,12 +1077,12 @@ export const { Player } = createPlayer({ features: videoFeatures });
    text content. */
 .media-default-skin .media-button--live {
   display: inline-flex;
-  gap: calc(var(--spacing) * 1.5);
+  gap: calc(var(--media-spacing) * 1.5);
   align-items: center;
   width: auto;
   aspect-ratio: auto;
-  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
-  font-size: var(--font-size-small);
+  padding: calc(var(--media-spacing) * 2) calc(var(--media-spacing) * 3);
+  font-size: var(--media-font-size-small);
   font-weight: 600;
   line-height: 1;
   text-transform: uppercase;
@@ -1057,8 +1091,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
   &::before {
     display: inline-block;
     flex-shrink: 0;
-    width: calc(var(--spacing) * 2);
-    height: calc(var(--spacing) * 2);
+    width: calc(var(--media-spacing) * 2);
+    height: calc(var(--media-spacing) * 2);
     content: "";
     background-color: oklch(from currentColor l c h / 0.4);
     border-radius: 50%;
@@ -1089,8 +1123,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
 }
 
 .media-default-skin .media-badge {
-  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
-  font-size: var(--font-size-small);
+  padding: calc(var(--media-spacing) * 0.5) calc(var(--media-spacing) * 1.5);
+  font-size: var(--media-font-size-small);
   font-weight: 500;
   line-height: 1;
   color: oklch(from currentColor l c h / 0.85);
@@ -1138,7 +1172,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
   height: 100%;
   object-fit: var(--media-object-fit, contain);
   object-position: var(--media-object-position, center);
-  border-radius: var(--container-border-radius);
+  border-radius: var(--media-container-border-radius);
 }
 .media-default-skin > img {
   object-fit: var(--media-object-fit, contain);
@@ -1156,13 +1190,13 @@ export const { Player } = createPlayer({ features: videoFeatures });
   position: relative;
   pointer-events: none;
   background-color: oklch(0 0 0 / 0.9);
-  border-radius: calc(var(--spacing) * 3);
+  border-radius: calc(var(--media-spacing) * 3);
 
   .media-thumbnail__image {
     position: relative;
     display: block;
-    max-width: var(--thumbnail-max-width);
-    max-height: var(--thumbnail-max-height);
+    max-width: var(--media-thumbnail-max-width);
+    max-height: var(--media-thumbnail-max-height);
     overflow: clip;
     border-radius: inherit;
 
@@ -1199,7 +1233,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
   }
 
   &:has(.media-thumbnail__image[data-loading]) {
-    width: var(--thumbnail-max-width);
+    width: var(--media-thumbnail-max-width);
     max-width: 100%;
     aspect-ratio: 16 / 9;
     overflow: hidden;
@@ -1214,13 +1248,14 @@ export const { Player } = createPlayer({ features: videoFeatures });
 }
 
 .media-default-skin .media-slider {
-  --track-size: calc(var(--spacing) * 1);
-  --track-highlighted-size: calc(var(--spacing) * 1.75);
-  --track-border-radius: 99px;
-  --thumb-size: calc(var(--spacing) * 3);
-  --chapter-gap: calc(var(--spacing) * 1);
-  --chapter-inset-start: calc(var(--chapter-gap) / 2);
-  --chapter-inset-end: calc(var(--chapter-gap) / 2);
+  --media-track-size: calc(var(--media-spacing) * 1);
+  --media-track-highlighted-size: calc(var(--media-spacing) * 1.75);
+  --media-track-border-radius: 99px;
+  --media-track-transition-duration: 100ms;
+  --media-thumb-size: calc(var(--media-spacing) * 3);
+  --media-chapter-gap: calc(var(--media-spacing) * 1);
+  --media-internal-chapter-inset-start: calc(var(--media-chapter-gap) / 2);
+  --media-internal-chapter-inset-end: calc(var(--media-chapter-gap) / 2);
 
   position: relative;
   display: flex;
@@ -1231,13 +1266,13 @@ export const { Player } = createPlayer({ features: videoFeatures });
   outline: none;
 
   &[data-orientation="horizontal"] {
-    width: var(--slider-width, 100%);
-    min-width: calc(var(--spacing) * 20);
-    height: var(--slider-height, calc(var(--spacing) * 8));
+    width: var(--media-slider-width, 100%);
+    min-width: calc(var(--media-spacing) * 20);
+    height: var(--media-slider-height, calc(var(--media-spacing) * 8));
   }
   &[data-orientation="vertical"] {
-    width: var(--slider-width, calc(var(--spacing) * 8));
-    height: var(--slider-height, calc(var(--spacing) * 20));
+    width: var(--media-slider-width, calc(var(--media-spacing) * 8));
+    height: var(--media-slider-height, calc(var(--media-spacing) * 20));
   }
 
   /* Track */
@@ -1246,15 +1281,15 @@ export const { Player } = createPlayer({ features: videoFeatures });
     overflow: hidden;
     user-select: none;
     background-color: oklch(from currentColor l c h / 0.2);
-    border-radius: var(--track-border-radius);
+    border-radius: var(--media-track-border-radius);
     isolation: isolate;
 
     &[data-orientation="horizontal"] {
       width: 100%;
-      height: var(--track-size);
+      height: var(--media-track-size);
     }
     &[data-orientation="vertical"] {
-      width: var(--track-size);
+      width: var(--media-track-size);
       height: 100%;
     }
   }
@@ -1278,11 +1313,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
     }
 
     @media (prefers-reduced-motion: no-preference) {
-      transition: clip-path 200ms ease-out;
+      transition: clip-path var(--media-track-transition-duration) ease-out;
     }
   }
-  &[data-dragging],
-  &[data-seeking] {
+  &[data-dragging] {
     .media-slider__fill,
     .media-slider__buffer {
       transition-duration: 0ms;
@@ -1294,30 +1328,30 @@ export const { Player } = createPlayer({ features: videoFeatures });
     background-color: oklch(from currentColor l c h / 0.2);
 
     &[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-buffer)) 0 0 round var(--track-border-radius));
+      clip-path: inset(0 calc(100% - var(--media-slider-buffer)) 0 0 round var(--media-track-border-radius));
     }
     &[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-buffer)) 0 0 0 round var(--track-border-radius));
+      clip-path: inset(calc(100% - var(--media-slider-buffer)) 0 0 0 round var(--media-track-border-radius));
     }
   }
 
   /* Fill */
   .media-slider__fill {
-    background-color: var(--accent-color);
+    background-color: var(--media-internal-accent-color);
 
     &[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-fill)) 0 0 round var(--track-border-radius));
+      clip-path: inset(0 calc(100% - var(--media-slider-fill)) 0 0 round var(--media-track-border-radius));
     }
     &[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--track-border-radius));
+      clip-path: inset(calc(100% - var(--media-slider-fill)) 0 0 0 round var(--media-track-border-radius));
     }
   }
   &[data-dragging] {
     .media-slider__fill[data-orientation="horizontal"] {
-      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--track-border-radius));
+      clip-path: inset(0 calc(100% - var(--media-slider-pointer)) 0 0 round var(--media-track-border-radius));
     }
     .media-slider__fill[data-orientation="vertical"] {
-      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--track-border-radius));
+      clip-path: inset(calc(100% - var(--media-slider-pointer)) 0 0 0 round var(--media-track-border-radius));
     }
   }
 
@@ -1353,10 +1387,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
     border-radius: inherit;
 
     &:first-child {
-      --chapter-inset-start: 0px;
+      --media-internal-chapter-inset-start: 0px;
     }
     &:last-child {
-      --chapter-inset-end: 0px;
+      --media-internal-chapter-inset-end: 0px;
     }
 
     .media-slider__chapter-track {
@@ -1372,15 +1406,16 @@ export const { Player } = createPlayer({ features: videoFeatures });
       clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
 
       .media-slider__chapter-track {
-        height: var(--track-size);
+        height: var(--media-track-size);
         clip-path: inset(
-          0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
+          0 calc(100% - var(--media-slider-chapter-end) + var(--media-internal-chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--media-internal-chapter-inset-start)) round
+            var(--media-track-border-radius)
         );
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        height: var(--track-highlighted-size);
+        height: var(--media-track-highlighted-size);
       }
     }
 
@@ -1388,15 +1423,16 @@ export const { Player } = createPlayer({ features: videoFeatures });
       clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
 
       .media-slider__chapter-track {
-        width: var(--track-size);
+        width: var(--media-track-size);
         clip-path: inset(
-          calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
-            calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
+          calc(100% - var(--media-slider-chapter-end) + var(--media-internal-chapter-inset-end)) 0
+            calc(var(--media-slider-chapter-start) + var(--media-internal-chapter-inset-start)) 0 round
+            var(--media-track-border-radius)
         );
       }
 
       &[data-highlighted] .media-slider__chapter-track {
-        width: var(--track-highlighted-size);
+        width: var(--media-track-highlighted-size);
       }
     }
   }
@@ -1405,15 +1441,15 @@ export const { Player } = createPlayer({ features: videoFeatures });
   .media-slider__thumb {
     position: absolute;
     z-index: 10;
-    width: var(--thumb-size);
-    height: var(--thumb-size);
+    width: var(--media-thumb-size);
+    height: var(--media-thumb-size);
     user-select: none;
     outline: 4px solid transparent;
     outline-offset: -4px;
     background-color: currentColor;
     border-radius: calc(Infinity * 1px);
     box-shadow:
-      0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.1)),
+      0 0 0 1px var(--media-shadow-current-color, oklch(0 0 0 / 0.1)),
       0 1px 3px 0 oklch(0 0 0 / 0.35),
       0 1px 2px -1px oklch(0 0 0 / 0.35);
     opacity: 0;
@@ -1462,7 +1498,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
     @media (prefers-reduced-motion: no-preference) {
       transition-timing-function: ease-out;
-      transition-duration: 150ms;
+      transition-duration: var(--media-track-transition-duration);
       transition-property: opacity, outline-offset, left, top, scale;
 
       &::after {
@@ -1498,48 +1534,47 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
   /* Preview */
   .media-slider__preview {
-    --max-size-factor: 36;
-    --max-size: min(calc(var(--spacing) * var(--max-size-factor)), 100cqi);
+    --media-max-size-factor: 36;
+    --media-max-size: min(calc(var(--media-spacing) * var(--media-max-size-factor)), 100cqi);
 
-    min-width: var(--max-size);
-    height: calc(var(--spacing) * 1);
+    min-width: var(--media-max-size);
+    height: calc(var(--media-spacing) * 1);
 
     @container media-root (width > 42rem) {
-      --max-size-factor: 48;
+      --media-max-size-factor: 48;
     }
 
     .media-slider__thumbnail,
     .media-slider__value {
       position: absolute;
       left: 50%;
-      max-width: var(--max-size);
+      max-width: var(--media-max-size);
       opacity: 0;
       filter: blur(8px);
       transform-origin: bottom;
       scale: 0.8;
-      translate: -50% calc(var(--spacing) * 2);
+      translate: -50% calc(var(--media-spacing) * 2);
       transition-timing-function: ease-out;
       transition-duration: 150ms;
     }
 
     .media-slider__thumbnail {
-      --thumbnail-max-width: var(--max-size);
-      --thumbnail-max-height: var(--max-size);
-      bottom: calc(100% + (var(--spacing) * 9));
+      --media-thumbnail-max-width: var(--media-max-size);
+      --media-thumbnail-max-height: var(--media-max-size);
+      bottom: calc(100% + (var(--media-spacing) * 9));
     }
 
     .media-slider__value {
-      bottom: calc(100% + (var(--spacing) * 10.5));
+      bottom: calc(100% + (var(--media-spacing) * 10.5));
       display: flex;
       flex-direction: column;
       align-items: center;
-      text-shadow: 0 1px 0 var(--shadow-current-color);
     }
 
     .media-slider__chapter-title {
       min-width: 0;
-      max-width: var(--max-size);
-      padding-inline: calc(var(--spacing) * 6);
+      max-width: var(--media-max-size);
+      padding-inline: calc(var(--media-spacing) * 6);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -1554,14 +1589,14 @@ export const { Player } = createPlayer({ features: videoFeatures });
       top: 50%;
       left: 50%;
       z-index: 1;
-      width: calc(var(--spacing) * 1);
-      height: calc(var(--spacing) * 1);
+      width: calc(var(--media-spacing) * 1);
+      height: calc(var(--media-spacing) * 1);
       pointer-events: none;
       content: "";
       background-color: currentColor;
       border-radius: 100%;
       box-shadow:
-        0 0 0 1px var(--shadow-current-color, oklch(0 0 0 / 0.15)),
+        0 0 0 1px var(--media-shadow-current-color, oklch(0 0 0 / 0.15)),
         0 1px 2px 0 oklch(0 0 0 / 0.35);
       opacity: 0;
       scale: 0.5;
@@ -1583,51 +1618,51 @@ export const { Player } = createPlayer({ features: videoFeatures });
 }
 
 .media-default-skin {
-  --popup-transition:
-    opacity var(--popup-transition-timing-function) var(--popup-transition-duration),
-    filter var(--popup-transition-timing-function) var(--popup-transition-duration),
-    transform var(--popup-transition-timing-function) var(--popup-transition-duration),
-    scale var(--popup-transition-timing-function) var(--popup-transition-duration);
+  --media-popup-transition:
+    opacity var(--media-popup-transition-timing-function) var(--media-popup-transition-duration),
+    filter var(--media-popup-transition-timing-function) var(--media-popup-transition-duration),
+    transform var(--media-popup-transition-timing-function) var(--media-popup-transition-duration),
+    scale var(--media-popup-transition-timing-function) var(--media-popup-transition-duration);
 }
 
 .media-default-skin .media-popover,
 .media-default-skin .media-tooltip {
-  --popup-translate-distance: calc(0.5 * var(--scale-unit));
+  --media-popup-translate-distance: calc(0.5 * var(--media-internal-scale-unit));
   margin: 0;
   overflow: visible;
   color: inherit;
   border: 0;
-  transition: var(--popup-transition);
+  transition: var(--media-popup-transition);
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
     filter: blur(4px);
     /* We have to use transform here for translate as the translate property is used for positioning by core. */
-    transform: translate(var(--popup-translate-x-distance, 0), var(--popup-translate-y-distance, 0));
+    transform: translate(var(--media-popup-translate-x-distance, 0), var(--media-popup-translate-y-distance, 0));
     scale: 0.95;
   }
 
   &[data-ending-style] {
     transform: none;
     /* Speed up the exit transition. */
-    transition-duration: max(0ms, calc(var(--popup-transition-duration) - 50ms));
+    transition-duration: max(0ms, calc(var(--media-popup-transition-duration) - 50ms));
   }
 
   &[data-side="top"] {
-    --popup-translate-y-distance: var(--popup-translate-distance);
+    --media-popup-translate-y-distance: var(--media-popup-translate-distance);
     transform-origin: bottom;
   }
   &[data-side="bottom"] {
-    --popup-translate-y-distance: calc(var(--popup-translate-distance) * -1);
+    --media-popup-translate-y-distance: calc(var(--media-popup-translate-distance) * -1);
     transform-origin: top;
   }
   &[data-side="left"] {
-    --popup-translate-x-distance: var(--popup-translate-distance);
+    --media-popup-translate-x-distance: var(--media-popup-translate-distance);
     transform-origin: right;
   }
   &[data-side="right"] {
-    --popup-translate-x-distance: calc(var(--popup-translate-distance) * -1);
+    --media-popup-translate-x-distance: calc(var(--media-popup-translate-distance) * -1);
     transform-origin: left;
   }
 
@@ -1674,7 +1709,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
   }
 }
 .media-default-skin .media-popover--volume {
-  padding: calc(var(--spacing) * 3) 0;
+  padding: calc(var(--media-spacing) * 3) 0;
   border-radius: calc(Infinity * 1px);
 
   &:has(media-volume-slider[data-hidden]) {
@@ -1683,15 +1718,15 @@ export const { Player } = createPlayer({ features: videoFeatures });
 }
 
 .media-default-skin .media-tooltip {
-  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
-  font-size: var(--font-size-base);
+  padding: calc(var(--media-spacing) * 1) calc(var(--media-spacing) * 2.5);
+  font-size: var(--media-font-size-base);
   white-space: nowrap;
   border-radius: calc(Infinity * 1px);
 
   /* `display: flex` must not apply while closed — it overrides UA `[popover]` hiding. */
   &[data-open] {
     display: flex;
-    column-gap: calc(var(--spacing) * 1);
+    column-gap: calc(var(--media-spacing) * 1);
     align-items: center;
   }
 
@@ -1708,72 +1743,75 @@ export const { Player } = createPlayer({ features: videoFeatures });
     min-width: 1.5em;
     padding: 0.1em;
     font-family: inherit;
-    font-size: var(--font-size-small);
+    font-size: var(--media-font-size-small);
     font-weight: 600;
     line-height: 1.25;
     text-align: center;
     background-color: oklch(from currentColor l c h / 0.3);
-    border-radius: calc(var(--spacing) * 1);
+    border-radius: calc(var(--media-spacing) * 1);
   }
 }
 
 .media-default-skin .media-menu {
-  --menu-transition-duration: 250ms;
-  --menu-max-height: calc(var(--spacing) * 56);
-  --menu-padding: calc(var(--spacing) * 1);
-  --menu-border-radius: calc(var(--spacing) * 3);
-  --menu-item-border-radius: calc(var(--menu-border-radius) - var(--menu-padding));
+  --media-menu-transition-duration: 250ms;
+  --media-menu-max-height: calc(var(--media-spacing) * 56);
+  --media-menu-padding: calc(var(--media-spacing) * 1);
+  --media-menu-border-radius: calc(var(--media-spacing) * 3);
+  --media-menu-item-border-radius: calc(var(--media-menu-border-radius) - var(--media-menu-padding));
   box-sizing: border-box;
   min-width: max-content;
-  max-width: var(--media-popover-available-width, none);
-  max-height: min(var(--media-popover-available-height, var(--menu-max-height)), var(--menu-max-height));
-  padding: var(--menu-padding);
+  max-width: var(--media-menu-available-width, none);
+  max-height: min(var(--media-menu-available-height, var(--media-menu-max-height)), var(--media-menu-max-height));
+  padding: var(--media-menu-padding);
   overflow: auto;
   overscroll-behavior: none;
-  border-radius: var(--menu-border-radius);
+  border-radius: var(--media-menu-border-radius);
 
   @media (prefers-reduced-motion: reduce) {
-    --menu-transition-duration: 0ms;
+    --media-menu-transition-duration: 0ms;
   }
 
   & > .media-menu__panel {
+    --media-menu-content-enter-translate: 100%;
+
     position: absolute;
     inset-inline: 0;
     top: 0;
     z-index: 10;
     max-height: inherit;
-    padding: var(--menu-padding);
+    padding: var(--media-menu-padding);
     overflow: auto;
     overscroll-behavior: none;
     outline: none;
     translate: 0 0;
     transition-timing-function: ease-out;
-    transition-duration: var(--menu-transition-duration);
+    transition-duration: var(--media-menu-transition-duration);
     transition-property: translate, filter;
 
     &:where([data-starting-style], [data-ending-style]) {
       overflow: hidden;
       pointer-events: none;
       filter: blur(8px);
-      translate: 100% 0;
+      translate: var(--media-menu-content-enter-translate) 0;
     }
 
     &:dir(rtl):where([data-starting-style], [data-ending-style]) {
-      translate: -100% 0;
+      --media-menu-content-enter-translate: -100%;
     }
   }
 
   .media-menu__separator {
-    margin-block: calc(var(--spacing) * 1);
+    margin-block: calc(var(--media-spacing) * 1);
     border-bottom: 1px solid oklch(0 0 0 / 0.1);
     box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.075);
   }
 
+  .media-menu__content,
   .media-menu__group {
     anchor-scope: --menu-item-highlight-anchor;
     display: flex;
     flex-direction: column;
-    gap: calc(var(--spacing) * 0.5);
+    gap: calc(var(--media-spacing) * 0.5);
 
     @supports (top: anchor(top)) {
       &::before {
@@ -1785,8 +1823,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
         overflow-anchor: none;
         pointer-events: none;
         content: "";
-        background-color: var(--accent-background-color);
-        border-radius: var(--menu-item-border-radius);
+        background-color: var(--media-accent-background-color);
+        border-radius: var(--media-menu-item-border-radius);
         transition: inset 100ms ease-in-out;
       }
 
@@ -1800,16 +1838,17 @@ export const { Player } = createPlayer({ features: videoFeatures });
   .media-menu__back {
     position: relative;
     display: flex;
-    gap: calc(var(--spacing) * 1.5);
+    gap: calc(var(--media-spacing) * 1.5);
     align-items: center;
-    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+    padding: calc(var(--media-spacing) * 1.5) calc(var(--media-spacing) * 2);
     text-align: start;
-    text-shadow: 0 1px 0 var(--shadow-current-color);
+    white-space: nowrap;
+    text-shadow: 0 1px 0 var(--media-shadow-current-color);
     cursor: pointer;
     user-select: none;
     outline: 2px solid transparent;
     outline-offset: -2px;
-    border-radius: var(--menu-item-border-radius);
+    border-radius: var(--media-menu-item-border-radius);
     transition: background-color, color;
     transition-timing-function: ease-in-out;
     transition-duration: 100ms;
@@ -1817,18 +1856,18 @@ export const { Player } = createPlayer({ features: videoFeatures });
     .media-icon {
       flex-shrink: 0;
       color: oklch(from currentColor l c h / 0.65);
-      filter: drop-shadow(0 1px 0 var(--shadow-current-color));
+      filter: drop-shadow(0 1px 0 var(--media-shadow-current-color));
     }
 
     &:focus-visible {
-      outline-color: var(--focus-ring-color);
+      outline-color: var(--media-focus-ring-color);
       outline-offset: 2px;
     }
 
     &:hover,
     &[data-highlighted] {
-      color: var(--accent-text-color);
-      background-color: var(--accent-background-color);
+      color: var(--media-internal-accent-text-color);
+      background-color: var(--media-accent-background-color);
 
       .media-icon {
         color: inherit;
@@ -1847,11 +1886,11 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
   .media-menu__indicator {
     flex-shrink: 0;
-    margin-inline: auto calc(var(--spacing) * -1);
+    margin-inline: auto calc(var(--media-spacing) * -1);
     opacity: 0;
 
     .media-icon {
-      filter: drop-shadow(0 1px 0 var(--shadow-current-color));
+      filter: drop-shadow(0 1px 0 var(--media-shadow-current-color));
     }
   }
 
@@ -1884,9 +1923,9 @@ export const { Player } = createPlayer({ features: videoFeatures });
   }
 
   .media-menu__tier {
-    padding-inline-start: calc(var(--spacing) * 0.5);
+    padding-inline-start: calc(var(--media-spacing) * 0.5);
     padding-top: 1px;
-    font-size: var(--font-size-tiny);
+    font-size: var(--media-font-size-tiny);
     font-weight: 600;
     line-height: 1;
     color: oklch(from currentColor l c h / 0.7);
@@ -1894,80 +1933,83 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
   .media-menu__back {
     width: 100%;
-    margin-bottom: calc(var(--spacing) * 0.5);
+    margin-bottom: calc(var(--media-spacing) * 0.5);
   }
 
   .media-menu__hint {
     display: inline-flex;
-    gap: calc(var(--spacing) * 1);
+    gap: calc(var(--media-spacing) * 1);
     align-items: center;
     min-width: 0;
-    padding-inline-start: calc(var(--spacing) * 2);
+    padding-inline-start: calc(var(--media-spacing) * 2);
     margin-inline-start: auto;
     color: oklch(from currentColor l c h / 0.65);
   }
 
   .media-menu__hint-label {
-    max-width: calc(var(--spacing) * 24);
+    max-width: calc(var(--media-spacing) * 24);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .media-menu__chevron {
-    width: calc(var(--spacing) * 3.5);
-    height: calc(var(--spacing) * 3.5);
+    width: calc(var(--media-spacing) * 3.5);
+    height: calc(var(--media-spacing) * 3.5);
   }
 
   /* Settings menu */
   &.media-menu--settings {
     width: var(--media-menu-width);
-    min-width: calc(var(--spacing) * 48);
+    min-width: calc(var(--media-spacing) * 44);
     height: var(--media-menu-height);
     overflow: hidden;
     /* Only the menu size changes between panels. */
     transition:
-      var(--popup-transition),
-      width var(--popup-transition-timing-function) var(--menu-transition-duration),
-      height var(--popup-transition-timing-function) var(--menu-transition-duration);
+      var(--media-popup-transition),
+      width var(--media-popup-transition-timing-function) var(--media-menu-transition-duration),
+      height var(--media-popup-transition-timing-function) var(--media-menu-transition-duration);
+
+    & > .media-menu__content {
+      --media-menu-content-exit-translate: -100%;
 
-    & > :not([data-submenu]) {
       translate: 0 0;
       transition:
-        translate var(--menu-transition-duration) ease-out,
-        filter var(--menu-transition-duration) ease-out;
-    }
+        translate var(--media-menu-transition-duration) ease-out,
+        filter var(--media-menu-transition-duration) ease-out;
 
-    &[data-submenu-expanded="true"] > :not([data-submenu]) {
-      filter: blur(8px);
-      translate: -100% 0;
+      &:dir(rtl) {
+        --media-menu-content-exit-translate: 100%;
+      }
     }
 
-    &:dir(rtl)[data-submenu-expanded="true"] > :not([data-submenu]) {
-      translate: 100% 0;
+    & > .media-menu__content[data-child-open] {
+      filter: blur(8px);
+      translate: var(--media-menu-content-exit-translate) 0;
     }
 
-    /* WebKit can restart the covered-content transition while the
+    /* WebKit can restart the parent Content transition while the
        anchor-positioned highlight remains active. */
-    &[data-submenu-expanded] > :not([data-submenu])::before {
+    & > .media-menu__content[data-child-open]::before,
+    &:has(> .media-menu__panel[data-ending-style]) > .media-menu__content::before {
       display: none;
     }
 
     /* Don't transition size on open/close. */
     &[data-starting-style],
     &[data-ending-style] {
-      transition: var(--popup-transition);
+      transition: var(--media-popup-transition);
     }
   }
 }
 
 .media-default-skin {
-  --media-caption-track-duration: var(--controls-transition-duration);
+  --media-caption-track-duration: var(--media-controls-transition-duration);
   --media-caption-track-delay: 25ms;
-  --media-caption-track-y: calc(var(--spacing) * -2);
+  --media-caption-track-y: calc(var(--media-spacing) * -2);
 
   &:has(.media-controls[data-visible]) {
-    --media-caption-track-y: calc(var(--spacing) * -14);
+    --media-caption-track-y: calc(var(--media-spacing) * -14);
   }
 }
 
@@ -1980,7 +2022,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
   transition-delay: var(--media-caption-track-delay);
 }
 
-.media-default-skin .media-input-indicator-overlay {
+.media-default-skin .media-input-indicator {
   position: absolute;
   inset: 0;
   display: grid;
@@ -1994,9 +2036,9 @@ export const { Player } = createPlayer({ features: videoFeatures });
 .media-default-skin {
   .media-volume-indicator,
   .media-status-indicator--state {
-    --surface-background-color: oklch(0 0 0 / 0.25);
+    --media-surface-background-color: oklch(0 0 0 / 0.25);
     position: absolute;
-    top: calc(var(--spacing) * 3);
+    top: calc(var(--media-spacing) * 3);
     font-weight: 500;
     color: inherit;
     pointer-events: none;
@@ -2008,11 +2050,11 @@ export const { Player } = createPlayer({ features: videoFeatures });
     .media-volume-indicator__content,
     .media-status-indicator__content {
       display: flex;
-      gap: calc(var(--spacing) * 2);
+      gap: calc(var(--media-spacing) * 2);
       align-items: center;
       justify-content: space-between;
       width: 100%;
-      padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
+      padding: calc(var(--media-spacing) * 1) calc(var(--media-spacing) * 2.5);
 
       * {
         mix-blend-mode: difference;
@@ -2040,7 +2082,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
     }
 
     @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
-      --surface-background-color: oklch(0 0 0);
+      --media-surface-background-color: oklch(0 0 0);
     }
 
     &[data-starting-style],
@@ -2068,13 +2110,13 @@ export const { Player } = createPlayer({ features: videoFeatures });
     grid-row: 1;
     grid-column: 2;
     place-content: center;
-    padding: calc(var(--spacing) * 4);
+    padding: calc(var(--media-spacing) * 4);
     text-align: center;
   }
 }
 
 .media-default-skin .media-volume-indicator {
-  width: min(80%, calc(var(--spacing) * 48));
+  width: min(80%, calc(var(--media-spacing) * 48));
   transform: translateX(0);
 
   .media-volume-indicator__content {
@@ -2170,14 +2212,14 @@ export const { Player } = createPlayer({ features: videoFeatures });
 }
 
 .media-default-skin .media-seek-indicator {
-  gap: calc(var(--spacing) * 1);
+  gap: calc(var(--media-spacing) * 1);
 
   .media-seek-indicator__value {
     font-variant-numeric: tabular-nums;
   }
 
   @container media-root (width > 24rem) {
-    padding: calc(var(--spacing) * 6);
+    padding: calc(var(--media-spacing) * 6);
   }
 
   &[data-direction="backward"] {
@@ -2305,57 +2347,57 @@ export const { Player } = createPlayer({ features: videoFeatures });
 /* Video-specific container styles */
 
 .media-default-skin--video {
-  --default-accent-color: oklch(1 0 0);
-  --border-color: light-dark(oklch(0 0 0 / 0.1), oklch(1 0 0 / 0.15));
-  --focus-ring-color: light-dark(oklch(0 0 0), oklch(1 0 0));
-  --media-video-border-radius: var(--container-border-radius);
+  --media-default-accent-color: oklch(1 0 0);
+  --media-border-color: light-dark(oklch(0 0 0 / 0.1), oklch(1 0 0 / 0.15));
+  --media-focus-ring-color: light-dark(oklch(0 0 0), oklch(1 0 0));
+  --media-video-border-radius: var(--media-container-border-radius);
 
-  --surface-background-color: oklch(1 0 0 / 0.1);
-  --surface-inner-border-color: oklch(1 0 0 / 0.1);
-  --surface-outer-border-color: oklch(0 0 0 / 0.1);
-  --surface-shadow-color: oklch(0 0 0 / 0.15);
-  --surface-backdrop-filter: blur(16px) saturate(1.5);
+  --media-surface-background-color: oklch(1 0 0 / 0.1);
+  --media-surface-inner-border-color: oklch(1 0 0 / 0.1);
+  --media-surface-outer-border-color: oklch(0 0 0 / 0.1);
+  --media-surface-shadow-color: oklch(0 0 0 / 0.15);
+  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
 
-  --controls-transition-duration: 100ms;
-  --controls-transition-timing-function: ease-out;
+  --media-controls-transition-duration: 100ms;
+  --media-controls-transition-timing-function: ease-out;
 
-  --error-dialog-transition-duration: 350ms;
-  --error-dialog-transition-delay: 100ms;
-  --error-dialog-transition-timing-function: ease-out;
+  --media-dialog-transition-duration: 350ms;
+  --media-dialog-transition-delay: 100ms;
+  --media-dialog-transition-timing-function: ease-out;
 
-  --popup-transition-duration: 100ms;
-  --popup-transition-timing-function: ease-out;
+  --media-popup-transition-duration: 100ms;
+  --media-popup-transition-timing-function: ease-out;
 
   overflow: clip;
   background: oklch(0 0 0);
 
   @media (prefers-reduced-motion: reduce) {
-    --error-dialog-transition-duration: 50ms;
-    --error-dialog-transition-delay: 0ms;
-    --popup-transition-duration: 0ms;
+    --media-dialog-transition-duration: 50ms;
+    --media-dialog-transition-delay: 0ms;
+    --media-popup-transition-duration: 0ms;
 
-    .media-error__dialog {
+    .media-dialog__popup {
       scale: 1;
       transition-property: opacity;
     }
   }
 
   @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
-    --surface-background-color: oklch(0 0 0);
-    --surface-inner-border-color: oklch(1 0 0 / 0.25);
-    --surface-outer-border-color: transparent;
+    --media-surface-background-color: oklch(0 0 0);
+    --media-surface-inner-border-color: oklch(1 0 0 / 0.25);
+    --media-surface-outer-border-color: transparent;
   }
 
   &:has(.media-controls--root:not([data-visible])) {
     /* Slight delay to hide controls on non-touch devices after interaction */
     @media (pointer: fine) {
-      --controls-transition-duration: 300ms;
+      --media-controls-transition-duration: 300ms;
     }
     @media (pointer: coarse) {
-      --controls-transition-duration: 150ms;
+      --media-controls-transition-duration: 150ms;
     }
     @media (prefers-reduced-motion: reduce) {
-      --controls-transition-duration: 50ms;
+      --media-controls-transition-duration: 50ms;
     }
   }
 
@@ -2367,93 +2409,95 @@ export const { Player } = createPlayer({ features: videoFeatures });
     pointer-events: none;
     content: "";
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px var(--border-color);
+    box-shadow: inset 0 0 0 1px var(--media-border-color);
   }
 
   &:fullscreen {
-    --container-border-radius: 0;
+    --media-container-border-radius: 0;
 
     &::after {
       display: none;
     }
 
     @media (width >= 1280px) {
-      --scale: 1.25;
+      --media-scale: 1.25;
     }
     @media (width >= 1536px) {
-      --scale: 1.5;
+      --media-scale: 1.5;
     }
     @media (width >= 1920px) {
-      --scale: 1.75;
+      --media-scale: 1.75;
     }
   }
 
   * {
-    --focus-ring-color: oklch(1 0 0);
+    --media-focus-ring-color: oklch(1 0 0);
   }
 }
 
-/* Error Dialog  */
+/* Dialog  */
 
-.media-default-skin--video .media-error {
+.media-default-skin--video .media-dialog__popup {
   position: absolute;
-  inset: 0;
+  top: 50%;
+  left: 50%;
   z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.media-default-skin--video .media-error__dialog {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--spacing) * 3);
+  gap: calc(var(--media-spacing) * 3);
   width: 100%;
-  max-width: calc(var(--spacing) * 72);
-  padding: calc(var(--spacing) * 3);
+  max-width: calc(var(--media-spacing) * 72);
+  padding: calc(var(--media-spacing) * 3);
   color: oklch(1 0 0);
   text-shadow: 0 1px 0 oklch(0 0 0 / 0.25);
-  border-radius: calc(var(--spacing) * 7);
-  transition-delay: var(--error-dialog-transition-delay);
-  transition-timing-function: var(--error-dialog-transition-timing-function);
-  transition-duration: var(--error-dialog-transition-duration);
+  border-radius: calc(var(--media-spacing) * 7);
+  translate: -50% -50%;
+  transition-delay: var(--media-dialog-transition-delay);
+  transition-timing-function: var(--media-dialog-transition-timing-function);
+  transition-duration: var(--media-dialog-transition-duration);
   transition-property: opacity, scale;
 }
 
-.media-default-skin--video .media-error[data-starting-style] .media-error__dialog,
-.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
+.media-default-skin--video .media-dialog__popup[data-starting-style],
+.media-default-skin--video .media-dialog__popup[data-ending-style],
+.media-default-skin--video media-error-dialog[data-starting-style] .media-dialog__popup,
+.media-default-skin--video media-error-dialog[data-ending-style] .media-dialog__popup {
   opacity: 0;
   scale: 0.95;
 }
-.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
+.media-default-skin--video .media-dialog__popup[data-ending-style],
+.media-default-skin--video media-error-dialog[data-ending-style] .media-dialog__popup {
   transition-delay: 0ms;
 }
 
-.media-default-skin--video .media-error__content {
+.media-default-skin--video .media-dialog__content {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--spacing) * 2);
-  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2) calc(var(--spacing) * 1.5);
+  gap: calc(var(--media-spacing) * 2);
+  padding: calc(var(--media-spacing) * 2) calc(var(--media-spacing) * 2) calc(var(--media-spacing) * 1.5);
   text-shadow: inherit;
 }
 
-.media-default-skin--video .media-error__title {
-  font-size: var(--font-size-medium);
+.media-default-skin--video .media-dialog__title {
+  font-size: var(--media-font-size-medium);
 }
 
-/* Controls (hide/show behavior) */
+.media-default-skin--video .media-slider__value {
+  text-shadow: 0 1px 0 var(--media-shadow-current-color);
+}
 
+/* Controls (hide/show behavior) */
 .media-default-skin--video .media-controls--root {
-  --inset-factor: 2;
-  --inset: calc(var(--spacing) * var(--inset-factor));
-  --base-boundary-offset: var(--inset-factor);
+  --media-inset-factor: 2;
+  --media-inset: calc(var(--media-spacing) * var(--media-inset-factor));
+  --media-base-boundary-offset: var(--media-inset-factor);
 
   z-index: 10;
   display: contents;
   color: oklch(1 0 0);
-  transition-timing-function: var(--controls-transition-timing-function);
+  transition-timing-function: var(--media-controls-transition-timing-function);
   /* Speed up the entry transition */
-  transition-duration: calc(var(--controls-transition-duration) / 2);
+  transition-duration: calc(var(--media-controls-transition-duration) / 2);
 
   .media-controls--primary,
   .media-controls--secondary {
@@ -2468,21 +2512,21 @@ export const { Player } = createPlayer({ features: videoFeatures });
   }
 
   .media-controls--primary {
-    inset-inline: var(--inset);
-    bottom: var(--inset);
+    inset-inline: var(--media-inset);
+    bottom: var(--media-inset);
     transform-origin: bottom;
   }
 
   .media-controls--secondary {
-    top: var(--inset);
-    right: var(--inset);
+    top: var(--media-inset);
+    right: var(--media-inset);
     container-type: normal;
     transform-origin: top;
   }
 
   .media-time-controls {
     flex: 1;
-    padding-inline: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--media-spacing) * 2);
   }
 
   @container media-root (width < 32rem) {
@@ -2510,7 +2554,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
         pointer-events: none;
         opacity: 0;
         scale: 0.95;
-        transition-duration: var(--controls-transition-duration);
+        transition-duration: var(--media-controls-transition-duration);
 
         @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
           filter: blur(8px);
@@ -2541,8 +2585,8 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
   @container media-root (width >= 32rem) {
     position: absolute;
-    inset-inline: var(--inset);
-    bottom: var(--inset);
+    inset-inline: var(--media-inset);
+    bottom: var(--media-inset);
     display: flex;
     transform-origin: bottom;
 
@@ -2559,7 +2603,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
       pointer-events: none;
       opacity: 0;
       scale: 0.95;
-      transition-duration: var(--controls-transition-duration);
+      transition-duration: var(--media-controls-transition-duration);
 
       @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
         filter: blur(8px);
@@ -2575,7 +2619,7 @@ export const { Player } = createPlayer({ features: videoFeatures });
     }
 
     .media-time-controls {
-      padding-inline: calc(var(--spacing) * 3);
+      padding-inline: calc(var(--media-spacing) * 3);
     }
   }
 
@@ -2588,14 +2632,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
   }
 
   @container media-root (width > 42rem) {
-    --inset-factor: 3;
+    --media-inset-factor: 3;
   }
 }
 
-.media-default-skin--video .media-error[data-open] ~ .media-controls {
-  display: none;
-}
-
 /* Hide cursor when controls are hidden */
 .media-default-skin--video:has(.media-controls--root:not([data-visible])) {
   cursor: none;
@@ -2609,6 +2649,10 @@ export const { Player } = createPlayer({ features: videoFeatures });
 
 ```
 
+[Read more about ejecting skins](../how-to/customize-skins.md)
+
+[Read more about UI components](./ui-components.md)
+
 ## Skins, features, and presets
 
 Each skin is built with specific [features](./features.md) in mind. For example, a video skin renders fullscreen and picture-in-picture controls. An audio skin doesn’t.
@@ -2757,29 +2801,26 @@ Default media element
 
 `<Video>`
 
-Presets are a topic quite a bit bigger than just this guide. To learn more, check out the guide:
-
 [Read about presets](./presets.md)
 
 ## Styling
 
-There are currently two options for styling:
+Packaged skins use vanilla CSS. Their documented CSS custom properties cover common visual changes.
 
-*   Vanilla CSS — import the stylesheet listed for each skin in the [preset table](#skins-features-and-presets). This is the default.
-*   Tailwind where you [eject](../how-to/customize-skins#ejecting) the skin and use Tailwind classnames in your app.
+Import the stylesheet listed for each skin in the [preset table](#skins-features-and-presets).
 
-### Current limitations
+To use Tailwind or change the underlying CSS, [eject the skin](../how-to/customize-skins#ejecting) and edit its styles in your app.
 
-*   In both style systems we assume a 16px root font size and we use rem units for sizing.
-*   The default font stack includes [`Inter`](https://rsms.me/inter/) (because it’s awesome) but we do not load the webfonts for you. If they are not available then system fonts are used.
+### Shared limitations
 
-These only apply to ejected HTML and React skins:
+*   Skin spacing and icons use a fixed `16px` base by default. Vanilla CSS font sizes use the same base, while Tailwind font sizes use rem units and assume a 16px root font size.
+*   The default font stack includes [`Inter`](https://rsms.me/inter/), but we do not load the webfont for you. If Inter is unavailable, the skin uses system fonts.
 
-#### Vanilla CSS
+### Ejected vanilla CSS
 
 *   We use a [BEM](https://en.bem.info/methodology/quick-start/) classname structure and every component classname is scoped with a `media-` prefix.
 
-#### Tailwind
+### Ejected Tailwind
 
-*   Currently we’re assuming you’re using the default configuration and that’s all that’s supported. With the release of our CLI, this will change, allowing you to specify a custom prefix to the Tailwind classnames. For now, you’ll need to edit the ejected skins yourself.
-*   We’re assuming the latest version, currently 4.2.x.
+*   Ejected skins establish their own spacing scale but otherwise assume the default configuration. A future CLI eject command will support custom class prefixes. For now, edit the ejected skin to use your prefix.
+*   Ejected skins currently support Tailwind 4.3.x.