@m4l/gclick 0.16.0 → 0.17.0

package/components/VideoPlayer/{VideojsSkin.styles.js → VideojsDefaultSkin.styles.js}

@@ -32,14 +32,14 @@ const t = (e) => ({
     "--media-current-shadow-color": "oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15))",
     "--media-current-shadow-color-subtle": "oklch(from var(--media-current-shadow-color) l c h / calc(alpha * 0.4))",
     "--media-icon-size": "18px",
+    "--media-color-scrollbar-thumb": "oklch(from currentColor l c h / 0.3)",
     position: "relative",
     display: "block",
     width: "100%",
     height: "100%",
     container: "media-root / inline-size",
-    // Themed (vendor value: `Inter Variable, Inter, ui-sans-serif, system-ui,
-    // sans-serif`) — the chrome follows the platform font instead of shipping
-    // the vendor's stack.
+    // Themed deviation (vendor value: `Inter Variable, Inter, ui-sans-serif, system-ui, sans-serif`) —
+    // the chrome follows the platform font instead of the vendor stack.
     fontFamily: e.typography.fontFamily,
     fontSize: "0.8125rem",
     /* 13px at 100% font size */
@@ -49,6 +49,8 @@ const t = (e) => ({
     letterSpacing: "normal",
     outline: "2px solid transparent",
     outlineOffset: "-4px",
+    scrollbarColor: "var(--media-color-scrollbar-thumb) transparent",
+    scrollbarWidth: "thin",
     borderRadius: "var(--media-border-radius, 2rem)",
     isolation: "isolate",
     transitionTimingFunction: "ease-out",
@@ -57,6 +59,14 @@ const t = (e) => ({
     "&:focus-visible": {
       outlineColor: "currentColor",
       outlineOffset: "2px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      background: "var(--media-color-scrollbar-thumb)",
+      borderRadius: "9999px"
+    },
+    "@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more)": {
+      "--media-color-scrollbar-thumb": "oklch(from currentColor l c h / 0.8)",
+      scrollbarWidth: "auto"
     }
   },
   /*
@@ -88,9 +98,8 @@ const t = (e) => ({
     display: "block",
     width: "100%",
     height: "100%",
-    // Double cast: csstype narrows `objectFit` to keywords and rejects the
-    // vendor's `var()` expression (a kebab-case key would trip Emotion's
-    // dev-mode warning instead). Serializes identically.
+    // Double cast: csstype narrows this property to keywords and rejects the
+    // vendor's `var()` expression. Serializes identically.
     objectFit: "var(--media-object-fit, contain)",
     objectPosition: "var(--media-object-position, center)"
   },
@@ -112,7 +121,7 @@ const t = (e) => ({
     position: "absolute",
     inset: "0",
     pointerEvents: "none",
-    backgroundImage: "linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0))",
+    backgroundImage: "linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3) 25%, oklch(0 0 0 / 0))",
     borderRadius: "inherit",
     opacity: "0",
     backdropFilter: "blur(0) saturate(1)",
@@ -127,6 +136,11 @@ const t = (e) => ({
   ".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",
+    backdropFilter: "blur(8px)"
+  },
   ".media-default-skin .media-error[data-open] ~ .media-overlay": {
     backdropFilter: "blur(16px) saturate(1.5)"
   },
@@ -138,20 +152,16 @@ const t = (e) => ({
   ".media-default-skin .media-buffering-indicator": {
     position: "absolute",
     inset: "0",
+    zIndex: "10",
     display: "none",
-    alignItems: "center",
-    justifyContent: "center",
+    placeContent: "center",
     color: "oklch(1 0 0)",
     pointerEvents: "none",
     "&:not([data-visible])": {
       "--media-spinner-animation": "none"
     },
     "&[data-visible]": {
-      display: "flex"
-    },
-    ".media-surface": {
-      padding: "0.25rem",
-      borderRadius: "100%"
+      display: "grid"
     }
   },
   /*
@@ -213,6 +223,19 @@ const t = (e) => ({
   ".media-default-skin .media-time": {
     fontVariantNumeric: "tabular-nums"
   },
+  '.media-default-skin .media-time[role="button"]': {
+    cursor: "pointer",
+    outline: "2px solid transparent",
+    outlineOffset: "-2px",
+    borderRadius: "0.25rem",
+    transitionTimingFunction: "ease-out",
+    transitionDuration: "100ms",
+    transitionProperty: "outline-color, outline-offset",
+    "&:focus-visible": {
+      outlineColor: "currentColor",
+      outlineOffset: "2px"
+    }
+  },
   /*
    * ==========================================================================
    * Buttons
@@ -281,6 +304,9 @@ const t = (e) => ({
     "&:active": {
       scale: "0.9"
     },
+    "& .media-icon__container": {
+      display: "grid"
+    },
     "& .media-icon": {
       gridArea: "1 / 1",
       transitionBehavior: "allow-discrete",
@@ -297,8 +323,9 @@ const t = (e) => ({
       right: "-1px",
       bottom: "-3px",
       fontSize: "10px",
-      fontWeight: "480",
-      fontVariantNumeric: "tabular-nums"
+      fontWeight: "500",
+      fontVariantNumeric: "tabular-nums",
+      letterSpacing: "-0.05em"
     },
     "&:has(.media-icon--flipped) .media-icon__label": {
       right: "unset",
@@ -317,6 +344,22 @@ const t = (e) => ({
       content: "none"
     }
   },
+  /* Settings button */
+  ".media-default-skin .media-button--settings": {
+    display: "none",
+    "& .media-icon--settings": {
+      transition: "transform 150ms ease-in-out",
+      "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "0ms"
+      }
+    },
+    '&[aria-expanded="true"] .media-icon--settings': {
+      transform: "rotate(90deg)"
+    }
+  },
+  '.media-default-skin .media-button-group:has([data-availability="available"]) .media-button--settings': {
+    display: "grid"
+  },
   /*
    * Live button — wide pill button with a status dot (gray → red at the live
    * edge) rendered via ::before, and "LIVE" text rendered as the button's own
@@ -361,6 +404,21 @@ const t = (e) => ({
       gap: "0.125rem"
     }
   },
+  /*
+   * ==========================================================================
+   * Badge
+   * ==========================================================================
+   */
+  ".media-default-skin .media-badge": {
+    padding: "0.125rem 0.375rem",
+    fontSize: "0.6875rem",
+    fontWeight: "500",
+    lineHeight: "1",
+    color: "oklch(from currentColor l c h / 0.85)",
+    whiteSpace: "nowrap",
+    backgroundColor: "oklch(from currentColor l c h / 0.1)",
+    borderRadius: "calc(infinity * 1px)"
+  },
   /*
    * ==========================================================================
    * Icons
@@ -377,88 +435,6 @@ const t = (e) => ({
   ".media-default-skin .media-icon--flipped": {
     scale: "-1 1"
   },
-  /*
-   * ==========================================================================
-   * Menus
-   * Note: Menus use `.media-popover` styles for positioning and transitions.
-   * ==========================================================================
-   */
-  ".media-default-skin .media-popover.media-menu": {
-    boxSizing: "border-box",
-    minWidth: "min(6rem, var(--media-popover-available-width, 6rem))",
-    maxWidth: "var(--media-popover-available-width, none)",
-    maxHeight: "var(--media-popover-available-height, none)",
-    padding: "0.375rem",
-    overflow: "auto",
-    overscrollBehavior: "none",
-    borderRadius: "1.25rem",
-    "&::before": {
-      display: "none"
-    }
-  },
-  ".media-default-skin .media-popover.media-menu .media-menu__group": {
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.125rem",
-    "&::before": {
-      position: "absolute",
-      positionAnchor: "--media-menu-item-highlight-anchor",
-      inset: "anchor(inside)",
-      pointerEvents: "none",
-      content: '""',
-      backgroundColor: "oklch(from currentColor l c h / 0.1)",
-      borderRadius: "calc(infinity * 1px)",
-      transition: "inset ease-in-out 100ms"
-    },
-    "@supports not (top: anchor(top))": {
-      "&::before": {
-        display: "none"
-      }
-    }
-  },
-  ".media-default-skin .media-popover.media-menu .media-menu__item": {
-    display: "flex",
-    gap: "0.5rem",
-    alignItems: "center",
-    justifyContent: "space-between",
-    minHeight: "2rem",
-    padding: "0 0.75rem",
-    fontVariantNumeric: "tabular-nums",
-    color: "inherit",
-    cursor: "pointer",
-    outline: "2px solid transparent",
-    outlineOffset: "-2px",
-    borderRadius: "calc(infinity * 1px)",
-    "&:hover, &[data-highlighted]": {
-      anchorName: "--media-menu-item-highlight-anchor"
-    },
-    "@supports not (top: anchor(top))": {
-      "&:hover, &[data-highlighted]": {
-        backgroundColor: "oklch(from currentColor l c h / 0.1)"
-      }
-    },
-    "&:focus-visible": {
-      outlineColor: "currentColor",
-      outlineOffset: "2px"
-    },
-    '&[aria-checked="true"] .media-menu__indicator': {
-      opacity: "1"
-    },
-    '&[aria-disabled="true"]': {
-      pointerEvents: "none",
-      cursor: "not-allowed",
-      opacity: "0.5"
-    }
-  },
-  ".media-default-skin .media-popover.media-menu .media-menu__indicator": {
-    flexShrink: "0",
-    marginRight: "-0.25rem",
-    opacity: "0"
-  },
-  ".media-default-skin .media-popover.media-menu .media-menu__indicator .media-icon": {
-    filter: "drop-shadow(0 1px 0 var(--media-current-shadow-color))"
-  },
   /*
    * ==========================================================================
    * Poster Image
@@ -472,7 +448,7 @@ const t = (e) => ({
     pointerEvents: "none",
     transition: "opacity 0.25s"
   },
-  ".media-default-skin media-poster:not([data-visible]), .media-default-skin > img:not([data-visible])": {
+  ".media-default-skin media-poster:not([data-visible]), .media-default-skin > img:not([data-visible]), .media-default-skin > img[data-visible]:not([data-loaded])": {
     opacity: "0"
   },
   ".media-default-skin media-poster ::slotted(img), .media-default-skin media-poster img": {
@@ -480,34 +456,53 @@ const t = (e) => ({
     inset: "0",
     width: "100%",
     height: "100%",
-    // Double cast: csstype narrows `objectFit` to keywords and rejects the
-    // vendor's `var()` expression (a kebab-case key would trip Emotion's
-    // dev-mode warning instead). Serializes identically.
+    // Double cast: csstype narrows this property to keywords and rejects the
+    // vendor's `var()` expression. Serializes identically.
     objectFit: "var(--media-object-fit, contain)",
     objectPosition: "var(--media-object-position, center)",
     borderRadius: "var(--media-video-border-radius)"
   },
   ".media-default-skin > img": {
-    // Double cast: csstype narrows `objectFit` to keywords and rejects the
-    // vendor's `var()` expression (a kebab-case key would trip Emotion's
-    // dev-mode warning instead). Serializes identically.
+    // Double cast: csstype narrows this property to keywords and rejects the
+    // vendor's `var()` expression. Serializes identically.
     objectFit: "var(--media-object-fit, contain)",
     objectPosition: "var(--media-object-position, center)",
     borderRadius: "inherit"
   },
+  /* Blurred placeholder: HTML path targets media-poster::before, React path targets the skin container::before */
+  ".media-default-skin media-poster::before, .media-default-skin::before": {
+    position: "absolute",
+    inset: "0",
+    pointerEvents: "none",
+    content: '""',
+    backgroundImage: "var(--media-poster-placeholder, none)",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "var(--media-object-position, center)",
+    backgroundSize: "var(--media-object-fit, contain)",
+    filter: "blur(var(--media-poster-placeholder-blur, 20px))"
+  },
+  /* React path: hidden by default, transitions in while poster loads */
+  ".media-default-skin::before": {
+    opacity: "0",
+    transition: "opacity 0.25s"
+  },
+  /* Show placeholder while the poster is visible but not yet loaded */
+  ".media-default-skin:has(img[data-visible]:not([data-loaded]))::before": {
+    opacity: "1"
+  },
   ".media-default-skin:fullscreen media-poster ::slotted(img), .media-default-skin:fullscreen media-poster img, .media-default-skin:fullscreen > img": {
     objectFit: "contain"
   },
   /*
    * ==========================================================================
-   * Media preview
+   * Media thumbnail
    * ==========================================================================
    */
-  ".media-default-skin .media-preview": {
+  ".media-default-skin .media-thumbnail": {
     pointerEvents: "none",
     backgroundColor: "oklch(0 0 0 / 0.9)",
     borderRadius: "0.75rem",
-    "& .media-preview__thumbnail": {
+    "& .media-thumbnail__image": {
       position: "relative",
       display: "block",
       overflow: "clip",
@@ -520,35 +515,32 @@ const t = (e) => ({
         borderRadius: "inherit"
       }
     },
-    "& .media-preview__time": {
+    "& .media-thumbnail__time": {
       position: "absolute",
       insetInline: "0",
       bottom: "0.5rem",
       textAlign: "center"
     },
-    "& .media-overlay": {
-      opacity: "1"
-    },
-    "& .media-preview__spinner": {
+    "& .media-thumbnail__spinner": {
       position: "absolute",
       top: "50%",
       left: "50%",
       opacity: "0",
       translate: "-50% -50%"
     },
-    "& .media-preview__thumbnail, & .media-preview__spinner": {
+    "& .media-thumbnail__image, & .media-thumbnail__spinner": {
       transition: "opacity 150ms ease-out"
     },
-    "&:not(:has(.media-preview__thumbnail[data-loading]))": {
-      "& .media-preview__spinner": {
+    "&:not(:has(.media-thumbnail__image[data-loading]))": {
+      "& .media-thumbnail__spinner": {
         "--media-spinner-animation": "none"
       }
     },
-    "&:has(.media-preview__thumbnail[data-loading])": {
-      "& .media-preview__thumbnail": {
+    "&:has(.media-thumbnail__image[data-loading])": {
+      "& .media-thumbnail__image": {
         opacity: "0"
       },
-      "& .media-preview__spinner": {
+      "& .media-thumbnail__spinner": {
         opacity: "1"
       }
     }
@@ -604,7 +596,7 @@ const t = (e) => ({
     outlineOffset: "-4px",
     backgroundColor: "currentColor",
     borderRadius: "calc(infinity * 1px)",
-    boxShadow: "0 0 0 1px var(--media-current-shadow-color-subtle, oklch(0 0 0 / 0.1)), 0 1px 3px 0 oklch(0 0 0 / 0.15), 0 1px 2px -1px oklch(0 0 0 / 0.15)",
+    boxShadow: "0 0 0 1px var(--media-current-shadow-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",
     translate: "-50% -50%",
     transitionTimingFunction: "ease-out",
@@ -619,7 +611,7 @@ const t = (e) => ({
       left: "50%"
     },
     "&:hover, &:focus": {
-      outlineColor: "oklch(from currentColor l c h / 0.25)",
+      outlineColor: "oklch(from currentColor l c h / 0.15)",
       outlineOffset: "0"
     },
     "&::after": {
@@ -627,7 +619,7 @@ const t = (e) => ({
       inset: "-4px",
       content: '""',
       borderRadius: "inherit",
-      boxShadow: "0 0 0 2px oklch(1 0 0)",
+      boxShadow: "0 0 0 2px currentColor",
       transitionTimingFunction: "ease-out",
       transitionDuration: "150ms",
       transitionProperty: "opacity, scale"
@@ -644,6 +636,41 @@ const t = (e) => ({
   ".media-default-skin .media-slider:hover .media-slider__thumb, .media-default-skin .media-slider__thumb:focus-visible, .media-default-skin .media-slider__thumb--persistent": {
     opacity: "1"
   },
+  /* Preview */
+  ".media-default-skin .media-slider__preview": {
+    "& .media-slider__value, &::before": {
+      opacity: "0",
+      scale: "0.5",
+      transitionTimingFunction: "ease-out",
+      transitionDuration: "200ms",
+      transitionProperty: "opacity, scale"
+    },
+    "& .media-slider__value": {
+      position: "absolute",
+      bottom: "2.25rem",
+      textShadow: "0 1px 0 var(--media-current-shadow-color)",
+      filter: "blur(8px)",
+      translate: "-50% 0.5rem",
+      transitionProperty: "filter, opacity, scale, translate"
+    },
+    "&::before": {
+      display: "block",
+      minWidth: "0.25rem",
+      height: "0.25rem",
+      content: '""',
+      backgroundColor: "currentColor",
+      borderRadius: "100%",
+      boxShadow: "0 0 0 1px var(--media-current-shadow-color, oklch(0 0 0 / 0.15)), 0 1px 2px 0 oklch(0 0 0 / 0.35)"
+    },
+    "&[data-pointing] .media-slider__value, &[data-pointing]:not([data-dragging])::before": {
+      opacity: "1",
+      scale: "1"
+    },
+    "&[data-pointing] .media-slider__value": {
+      filter: "blur(0)",
+      translate: "-50% 0"
+    }
+  },
   /* Shared track fills */
   ".media-default-skin .media-slider__buffer, .media-default-skin .media-slider__fill": {
     position: "absolute",
@@ -700,33 +727,42 @@ const t = (e) => ({
    * Popups & Tooltips
    * ==========================================================================
    */
+  ".media-default-skin ": {
+    "--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": "0.5rem",
     margin: "0",
     overflow: "visible",
     color: "inherit",
     border: "0",
-    filter: "blur(0px)",
-    transitionTimingFunction: "var(--media-popup-transition-timing-function)",
-    transitionDuration: "var(--media-popup-transition-duration)",
-    transitionProperty: "scale, opacity, filter",
+    transition: "var(--media-popup-transition)",
     "&[data-starting-style], &[data-ending-style]": {
       opacity: "0",
-      filter: "blur(8px)",
-      scale: "0.85"
+      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))",
+      scale: "0.95"
     },
-    "&[data-instant]": {
-      transitionDuration: "0ms"
+    "&[data-ending-style]": {
+      transform: "none",
+      /* Speed up the exit transition. */
+      transitionDuration: "max(0ms, calc(var(--media-popup-transition-duration) - 50ms))"
     },
     '&[data-side="top"]': {
+      "--popup-translate-y-distance": "var(--popup-translate-distance)",
       transformOrigin: "bottom"
     },
     '&[data-side="bottom"]': {
+      "--popup-translate-y-distance": "calc(var(--popup-translate-distance) * -1)",
       transformOrigin: "top"
     },
     '&[data-side="left"]': {
+      "--popup-translate-x-distance": "var(--popup-translate-distance)",
       transformOrigin: "right"
     },
     '&[data-side="right"]': {
+      "--popup-translate-x-distance": "calc(var(--popup-translate-distance) * -1)",
       transformOrigin: "left"
     },
     /* Safe area between trigger and popup */
@@ -776,11 +812,218 @@ const t = (e) => ({
     fontSize: "0.75rem",
     whiteSpace: "nowrap",
     borderRadius: "calc(infinity * 1px)",
+    /* `display: flex` must not apply while closed — it overrides UA `[popover]` hiding. */
+    "&[data-open]": {
+      display: "flex",
+      columnGap: "0.25rem",
+      alignItems: "center"
+    },
     '&[data-side="top"]::before, &[data-side="bottom"]::before': {
       height: "var(--media-tooltip-side-offset)"
     },
     '&[data-side="left"]::before, &[data-side="right"]::before': {
       width: "var(--media-tooltip-side-offset)"
+    },
+    "& .media-tooltip__kbd": {
+      minWidth: "1.5em",
+      padding: "0.1em",
+      fontFamily: "inherit",
+      fontSize: "90%",
+      fontWeight: "600",
+      lineHeight: "1.25",
+      textAlign: "center",
+      backgroundColor: "oklch(from currentColor l c h / 0.3)",
+      borderRadius: "0.25rem"
+    }
+  },
+  /*
+   * ==========================================================================
+   * Menus
+   * Note: Menus use `.media-popover` styles for positioning and transitions.
+   * ==========================================================================
+   */
+  ".media-default-skin .media-menu": {
+    "--menu-transition-duration": "250ms",
+    "--menu-max-height": "14rem",
+    "--menu-padding": "0.25rem",
+    "--menu-border-radius": "0.75rem",
+    "--menu-item-border-radius": "calc(var(--menu-border-radius) - var(--menu-padding))",
+    boxSizing: "border-box",
+    maxWidth: "var(--media-popover-available-width, none)",
+    maxHeight: "min(var(--media-popover-available-height, var(--menu-max-height)), var(--menu-max-height))",
+    padding: "var(--menu-padding)",
+    overflow: "auto",
+    overscrollBehavior: "none",
+    borderRadius: "var(--menu-border-radius)",
+    "@media (prefers-reduced-motion: reduce)": {
+      "--menu-transition-duration": "0ms"
+    },
+    "& .media-menu__panel": {
+      position: "absolute",
+      inset: "0",
+      padding: "var(--menu-padding)",
+      overflow: "auto",
+      overscrollBehavior: "none",
+      outline: "none",
+      translate: "0 0",
+      transitionTimingFunction: "ease-in-out",
+      transitionDuration: "var(--menu-transition-duration)",
+      transitionProperty: "translate, filter",
+      willChange: "translate, filter",
+      "&[data-starting-style], &[data-ending-style]": {
+        overflow: "hidden"
+      },
+      /* Root settings view — slides out when a submenu is active */
+      '&[data-menu-root-view][data-menu-view-state="inactive"]': {
+        filter: "blur(8px)",
+        translate: "-100% 0",
+        /* Hide the indicator while transitioning */
+        "& .media-menu__group::before": {
+          display: "none"
+        }
+      },
+      /* Submenu panels — slide in/out alongside the root view */
+      "&[data-submenu]": {
+        zIndex: "10",
+        "&:not([data-open], [data-ending-style])": {
+          translate: "-100% 0",
+          transitionProperty: "none"
+        },
+        "&[data-starting-style], &[data-ending-style]": {
+          pointerEvents: "none",
+          filter: "blur(8px)"
+        },
+        '&[data-starting-style][data-direction="forward"], &[data-ending-style][data-direction="back"]': {
+          translate: "100% 0"
+        },
+        '&[data-ending-style][data-direction="forward"], &[data-starting-style][data-direction="back"]': {
+          translate: "-100% 0"
+        }
+      }
+    },
+    "& .media-menu__separator": {
+      marginBlock: "0.25rem",
+      borderBottom: "1px solid oklch(0 0 0 / 0.1)",
+      boxShadow: "0 1px 0 0 oklch(1 0 0 / 0.075)"
+    },
+    "& .media-menu__group": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.125rem",
+      "@supports (top: anchor(top))": {
+        "&::before": {
+          position: "absolute",
+          positionAnchor: "--media-menu-item-highlight-anchor",
+          inset: "anchor(inside)",
+          pointerEvents: "none",
+          content: '""',
+          backgroundColor: "oklch(from currentColor l c h / 0.1)",
+          borderRadius: "var(--menu-item-border-radius)",
+          transition: "inset ease-in-out 100ms"
+        }
+      }
+    },
+    "& .media-menu__item, & .media-menu__back": {
+      display: "flex",
+      gap: "0.375rem",
+      alignItems: "center",
+      padding: "0.375rem 0.5rem",
+      textAlign: "left",
+      textShadow: "0 1px 0 var(--media-current-shadow-color)",
+      cursor: "pointer",
+      userSelect: "none",
+      outline: "2px solid transparent",
+      outlineOffset: "-2px",
+      borderRadius: "var(--menu-item-border-radius)",
+      transition: "background-color, color",
+      transitionTimingFunction: "ease-out",
+      transitionDuration: "100ms",
+      "&:focus-visible": {
+        outlineColor: "currentColor",
+        outlineOffset: "2px"
+      },
+      "&:hover, &[data-highlighted]": {
+        backgroundColor: "oklch(from currentColor l c h / 0.1)",
+        "@supports (top: anchor(top))": {
+          anchorName: "--media-menu-item-highlight-anchor",
+          backgroundColor: "transparent"
+        }
+      },
+      "& .media-icon": {
+        flexShrink: "0",
+        color: "oklch(from currentColor l c h / 0.65)",
+        filter: "drop-shadow(0 1px 0 var(--media-current-shadow-color))"
+      }
+    },
+    "& .media-menu__indicator": {
+      flexShrink: "0",
+      marginRight: "-0.25rem",
+      marginLeft: "auto",
+      opacity: "0",
+      "& .media-icon": {
+        filter: "drop-shadow(0 1px 0 var(--media-current-shadow-color))"
+      }
+    },
+    "& .media-menu__item": {
+      justifyContent: "space-between",
+      fontVariantNumeric: "tabular-nums",
+      color: "inherit",
+      '&[aria-disabled="true"]': {
+        pointerEvents: "none",
+        cursor: "not-allowed",
+        opacity: "0.5"
+      },
+      '&[aria-checked="true"] .media-menu__indicator': {
+        opacity: "1"
+      },
+      '&[data-availability="unavailable"], &[data-availability="unsupported"]': {
+        display: "none"
+      }
+    },
+    "& .media-menu__tier": {
+      paddingTop: "1px",
+      paddingLeft: "0.125rem",
+      fontSize: "0.5625rem",
+      fontWeight: "600",
+      lineHeight: "1",
+      color: "oklch(from currentColor l c h / 0.7)"
+    },
+    "& .media-menu__back": {
+      width: "100%",
+      marginBottom: "0.125rem"
+    },
+    "& .media-menu__hint": {
+      display: "inline-flex",
+      gap: "0.25rem",
+      alignItems: "center",
+      minWidth: "0",
+      paddingLeft: "0.5rem",
+      marginLeft: "auto",
+      fontSize: "0.75rem",
+      color: "oklch(from currentColor l c h / 0.65)"
+    },
+    "& .media-menu__hint-label": {
+      maxWidth: "6rem",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    "& .media-menu__chevron": {
+      width: "0.875rem",
+      height: "0.875rem"
+    },
+    /* Settings menu */
+    "&.media-menu--settings": {
+      width: "var(--media-menu-width)",
+      minWidth: "12rem",
+      height: "var(--media-menu-height)",
+      overflow: "hidden",
+      /* Add height and width transitions. */
+      transition: "var(--media-popup-transition), height var(--media-popup-transition-timing-function) var(--menu-transition-duration), width var(--media-popup-transition-timing-function) var(--menu-transition-duration)",
+      /* Don't transition width and height on open/close. */
+      "&[data-starting-style], &[data-ending-style]": {
+        transition: "var(--media-popup-transition)"
+      }
     }
   },
   /*
@@ -788,9 +1031,7 @@ const t = (e) => ({
    * Native Caption Track
    * ==========================================================================
    */
-  // Selector repeated by the vendor stylesheet at this level — the key carries a
-  // trailing space so it stays a distinct JS object key (serializes to the same CSS).
-  ".media-default-skin ": {
+  ".media-default-skin  ": {
     "--media-caption-track-duration": "var(--media-controls-transition-duration)",
     "--media-caption-track-delay": "25ms",
     "--media-caption-track-y": "-0.5rem",
@@ -897,96 +1138,97 @@ const t = (e) => ({
       backgroundImage: "linear-gradient( to right, currentColor 0%, currentColor var(--media-progress-fill), transparent var(--media-progress-fill), transparent 100% )",
       borderRadius: "inherit",
       transition: "--media-progress-fill 200ms linear"
+    },
+    '&[data-level="high"] .media-icon--volume-high, &[data-level="low"] .media-icon--volume-low, &[data-level="off"] .media-icon--volume-off': {
+      display: "block"
+    },
+    "@media (prefers-reduced-motion: no-preference)": {
+      "&[data-min], &[data-max]": {
+        animation: "media-shake 300ms ease-in-out"
+      }
     }
   },
-  '.media-default-skin .media-input-feedback-island--volume[data-level="high"] .media-icon--volume-high, .media-default-skin .media-input-feedback-island--volume[data-level="low"] .media-icon--volume-low, .media-default-skin .media-input-feedback-island--volume[data-level="off"] .media-icon--volume-off': {
-    display: "block"
-  },
-  '.media-default-skin .media-input-feedback-island--status[data-status="captions-on"] .media-icon--captions-on, .media-default-skin .media-input-feedback-island--status[data-status="captions-off"] .media-icon--captions-off, .media-default-skin .media-input-feedback-island--status[data-status="fullscreen"] .media-icon--fullscreen-enter, .media-default-skin .media-input-feedback-island--status[data-status="exit-fullscreen"] .media-icon--fullscreen-exit, .media-default-skin .media-input-feedback-island--status[data-status="pip"] .media-icon--pip-enter, .media-default-skin .media-input-feedback-island--status[data-status="exit-pip"] .media-icon--pip-exit': {
-    display: "block"
-  },
-  /* --- Boundary shake ------------------------------------------------------- */
-  // At-rule repeated by the vendor stylesheet at this level — the key carries a
-  // trailing space so it stays a distinct JS object key (serializes to the same CSS).
-  "@media (prefers-reduced-motion: no-preference) ": {
-    ".media-default-skin .media-input-feedback-island--volume[data-min], .media-default-skin .media-input-feedback-island--volume[data-max]": {
-      animation: "media-shake 300ms ease-in-out"
+  ".media-default-skin .media-input-feedback-island--status": {
+    '&[data-status="captions-on"] .media-icon--captions-on, &[data-status="captions-off"] .media-icon--captions-off, &[data-status="fullscreen"] .media-icon--fullscreen-enter, &[data-status="exit-fullscreen"] .media-icon--fullscreen-exit, &[data-status="pip"] .media-icon--pip-enter, &[data-status="exit-pip"] .media-icon--pip-exit': {
+      display: "block"
     }
   },
   /* --- Bubble ---------------------------------------------------------------- */
   ".media-default-skin .media-input-feedback-bubble": {
-    display: "flex",
-    flexDirection: "column",
+    display: "grid",
     gridRow: "1",
     gridColumn: "2",
-    /* default to center for status bubbles and undirected seeks */
-    alignItems: "center",
-    justifyContent: "center",
+    placeContent: "center",
     padding: "1rem",
-    transition: "opacity 250ms ease-out",
-    "@container media-root (width > 24rem)": {
-      padding: "2rem"
+    textAlign: "center",
+    /* Central bubble (play, pause) */
+    "&:not([data-direction])": {
+      background: "oklch(0 0 0 / 0.35)",
+      borderRadius: "100%",
+      backdropFilter: "blur(8px)",
+      transitionTimingFunction: "ease-out",
+      transitionDuration: "200ms",
+      transitionProperty: "opacity, scale",
+      "&[data-starting-style], &[data-ending-style]": {
+        opacity: "0",
+        scale: "0.85"
+      },
+      "&[data-ending-style]": {
+        transitionTimingFunction: "ease-in",
+        transitionDuration: "100ms"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "50ms",
+        transitionProperty: "opacity"
+      }
     },
-    "&[data-starting-style], &[data-ending-style]": {
-      opacity: "0",
-      transitionTimingFunction: "ease-in",
-      transitionDuration: "200ms"
-    }
-  },
-  /* Direction placement — seek bubbles move to the side implied by their direction. */
-  '.media-default-skin .media-input-feedback-bubble[data-direction="backward"]': {
-    gridColumn: "1",
-    justifySelf: "left"
-  },
-  ".media-default-skin .media-input-feedback-bubble:not([data-direction])": {
-    gridColumn: "2",
-    transitionTimingFunction: "ease-out, linear(0, 0.12 1.5%, 1.35 9.7%, 2.2 13.9%, 3 19.9%, 2.7 21.8%, 0.62 37.5%, 0.96 50.9%, 1)",
-    transitionDuration: "600ms",
-    transitionProperty: "opacity, scale",
-    "@media (prefers-reduced-motion: reduce)": {
-      transition: "opacity 100ms ease-out"
+    /* Directional bubbles (seek) */
+    "&[data-direction]": {
+      gap: "0.25rem",
+      "@container media-root (width > 24rem)": {
+        padding: "1.5rem"
+      }
     },
-    "&[data-starting-style], &[data-ending-style]": {
-      opacity: "0",
-      scale: "0.8",
-      transitionTimingFunction: "ease-in",
-      transitionDuration: "200ms"
-    }
-  },
-  '.media-default-skin .media-input-feedback-bubble[data-direction="forward"]': {
-    gridColumn: "3",
-    justifySelf: "right"
-  },
-  /* --- Bubble icons ---------------------------------------------------------- */
-  ".media-default-skin .media-input-feedback-bubble .media-icon": {
-    display: "none",
-    width: "36px",
-    height: "36px"
-  },
-  /* seek: seek icon, flipped for backward */
-  ".media-default-skin .media-input-feedback-bubble[data-direction] .media-icon--seek": {
-    display: "block"
-  },
-  '.media-default-skin .media-input-feedback-bubble[data-direction="backward"] .media-icon--seek': {
-    transform: "scaleX(-1)"
-  },
-  // At-rule repeated by the vendor stylesheet at this level (third occurrence) —
-  // the key carries TWO trailing spaces so it stays a distinct JS object key
-  // (serializes to the same CSS).
-  "@media (prefers-reduced-motion: no-preference)  ": {
-    '.media-default-skin .media-input-feedback-bubble[data-direction="forward"]:not([data-starting-style]) .media-icon--seek': {
-      animation: "media-slide-in-forward 300ms ease-in-out"
+    '&[data-direction="backward"]': {
+      gridColumn: "1",
+      justifySelf: "left"
     },
-    '.media-default-skin .media-input-feedback-bubble[data-direction="backward"]:not([data-starting-style]) .media-icon--seek': {
-      animation: "media-slide-in-backward 300ms ease-in-out"
+    '&[data-direction="forward"]': {
+      gridColumn: "3",
+      justifySelf: "right"
     },
-    ".media-default-skin .media-input-feedback-island--status[data-status]:not([data-starting-style]) .media-icon, .media-default-skin .media-input-feedback-bubble[data-status]:not([data-starting-style]) .media-icon": {
-      animation: "media-pop-in 250ms ease-out"
+    /* Icons */
+    ".media-icon": {
+      display: "none",
+      width: "calc(var(--media-icon-size) * 1.5)",
+      height: "calc(var(--media-icon-size) * 1.5)",
+      "&.media-icon--play": {
+        translate: "1px 0"
+      }
+    },
+    '&[data-direction] .media-icon--seek, &[data-status="pause"] .media-icon--pause, &[data-status="play"] .media-icon--play': {
+      display: "block"
+    },
+    '&[data-direction="backward"] .media-icon--seek': {
+      scale: "-1 1"
+    },
+    "@media (prefers-reduced-motion: no-preference)": {
+      ".media-icon--seek": {
+        transitionTimingFunction: "ease-in-out",
+        transitionDuration: "200ms",
+        transitionProperty: "translate, opacity"
+      },
+      "&[data-starting-style] .media-icon--seek, &[data-ending-style] .media-icon--seek": {
+        opacity: "0"
+      },
+      '&[data-direction="forward"][data-starting-style] .media-icon--seek': {
+        translate: "-60% 0"
+      },
+      '&[data-direction="backward"][data-starting-style] .media-icon--seek': {
+        translate: "60% 0"
+      }
     }
   },
-  '.media-default-skin .media-input-feedback-bubble[data-status="pause"] .media-icon--pause, .media-default-skin .media-input-feedback-bubble[data-status="play"] .media-icon--play': {
-    display: "block"
-  },
   /*
    * ==========================================================================
    * Icon State Visibility for Video Skins
@@ -997,16 +1239,27 @@ const t = (e) => ({
    * ==========================================================================
    */
   /* --- All icons hidden by default --- */
-  ".media-button--play .media-icon--restart, .media-button--play .media-icon--play, .media-button--play .media-icon--pause, .media-button--mute .media-icon--volume-off, .media-button--mute .media-icon--volume-low, .media-button--mute .media-icon--volume-high, .media-button--fullscreen .media-icon--fullscreen-enter, .media-button--fullscreen .media-icon--fullscreen-exit, .media-button--pip .media-icon--pip-enter, .media-button--pip .media-icon--pip-exit, .media-button--cast .media-icon--cast-enter, .media-button--cast .media-icon--cast-exit, .media-button--captions .media-icon--captions-off, .media-button--captions .media-icon--captions-on": {
+  ".media-button--play .media-icon--restart, .media-button--play .media-icon--play, .media-button--play .media-icon--pause, .media-button--mute .media-icon--volume-off, .media-button--mute .media-icon--volume-low, .media-button--mute .media-icon--volume-high, .media-button--fullscreen .media-icon--fullscreen-enter, .media-button--fullscreen .media-icon--fullscreen-exit, .media-button--pip .media-icon--pip-enter, .media-button--pip .media-icon--pip-exit, .media-button--cast .media-icon--cast-enter, .media-button--cast .media-icon--cast-exit, .media-button--airplay .media-icon--airplay-enter, .media-button--airplay .media-icon--airplay-exit, .media-button--captions .media-icon--captions-off, .media-button--captions .media-icon--captions-on": {
     display: "none",
     opacity: "0"
   },
   /* --- Active icon per state --- */
   /* Play: ended → restart */
-  '.media-button--play[data-ended] .media-icon--restart, .media-button--play:not([data-ended])[data-paused] .media-icon--play, .media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause, .media-button--mute[data-muted] .media-icon--volume-off, .media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low, .media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high, .media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter, .media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit, .media-button--pip:not([data-pip]) .media-icon--pip-enter, .media-button--pip[data-pip] .media-icon--pip-exit, .media-button--cast:not([data-cast-state="connected"]) .media-icon--cast-enter, .media-button--cast[data-cast-state="connected"] .media-icon--cast-exit, .media-button--captions:not([data-active]) .media-icon--captions-off, .media-button--captions[data-active] .media-icon--captions-on': {
+  '.media-button--play[data-ended] .media-icon--restart, .media-button--play:not([data-ended])[data-paused] .media-icon--play, .media-button--play:not([data-ended]):not([data-started]) .media-icon--play, .media-button--play[data-started]:not([data-paused]):not([data-ended]) .media-icon--pause, .media-button--mute[data-muted] .media-icon--volume-off, .media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low, .media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high, .media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter, .media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit, .media-button--pip:not([data-pip]) .media-icon--pip-enter, .media-button--pip[data-pip] .media-icon--pip-exit, .media-button--cast:not([data-cast-state="connected"]) .media-icon--cast-enter, .media-button--cast[data-cast-state="connected"] .media-icon--cast-exit, .media-button--airplay:not([data-airplay-state="connected"]) .media-icon--airplay-enter, .media-button--airplay[data-airplay-state="connected"] .media-icon--airplay-exit, .media-button--captions:not([data-active]) .media-icon--captions-off, .media-button--captions[data-active] .media-icon--captions-on': {
     display: "block",
     opacity: "1"
   },
+  /* --- Pause keyframe animations on inactive icons --- */
+  /*
+   * The airplay-exit SVG defines its keyframes against CSS variables (mirroring
+   * the spinner pattern). When the AirPlay session isn't active the SVG is
+   * still in the DOM — just `display: none` — so its animations would keep
+   * running. Set the variables to `none` to short-circuit the keyframes.
+   */
+  '.media-button--airplay:not([data-airplay-state="connected"])': {
+    "--media-icon--airplay__fill-animation": "none",
+    "--media-icon--airplay__triangle-animation": "none"
+  },
   /* -------------------------------------------------------------------------- */
   /* Global @keyframes for all video skins (CSS & Tailwind) */
   /* -------------------------------------------------------------------------- */
@@ -1027,24 +1280,6 @@ const t = (e) => ({
       translate: "1px 0"
     }
   },
-  "@keyframes media-slide-in-forward": {
-    from: {
-      translate: "-60% 0",
-      opacity: "0"
-    }
-  },
-  "@keyframes media-slide-in-backward": {
-    from: {
-      translate: "60% 0",
-      opacity: "0"
-    }
-  },
-  "@keyframes media-pop-in": {
-    from: {
-      scale: "0.8",
-      opacity: "0"
-    }
-  },
   /* -------------------------------------------------------------------------- */
   /* Global @properties for all video skins (CSS & Tailwind) */
   /* -------------------------------------------------------------------------- */
@@ -1078,6 +1313,7 @@ const t = (e) => ({
     "--media-tooltip-boundary-offset": "0.5rem",
     "--media-popover-side-offset": "0.5rem",
     "--media-popover-boundary-offset": "0.5rem",
+    overflow: "clip",
     background: "oklch(0 0 0)",
     "@media (prefers-reduced-motion: reduce)": {
       "--media-error-dialog-transition-duration": "50ms",
@@ -1174,8 +1410,6 @@ const t = (e) => ({
     bottom: "0.5rem",
     zIndex: "10",
     flexWrap: "wrap",
-    maxWidth: "56rem",
-    marginInline: "auto",
     color: "var(--media-color-primary, oklch(1 0 0))",
     transformOrigin: "bottom",
     transitionTimingFunction: "var(--media-controls-transition-timing-function)",
@@ -1204,9 +1438,6 @@ const t = (e) => ({
       order: "-1",
       paddingInline: "0.625rem"
     },
-    // Vendor uses `:first-child` here; swapped to the DOM-equivalent
-    // `:first-of-type` (the control bar children are exactly three `div`s) to
-    // avoid Emotion's dev-mode "unsafe for SSR" console.error on every mount.
     "& .media-button-group:first-of-type": {
       flex: "1",
       textAlign: "left"
@@ -1225,8 +1456,6 @@ const t = (e) => ({
         flex: "1",
         order: "unset"
       },
-      // `:first-of-type` instead of the vendor's `:first-child` — see the note
-      // on the sibling rule above (Emotion dev-mode SSR warning).
       "& .media-button-group:first-of-type, & .media-button-group:last-child": {
         flex: "0 0 auto"
       }
@@ -1248,18 +1477,18 @@ const t = (e) => ({
     backgroundColor: "oklch(1 0 0 / 0.2)",
     boxShadow: "0 0 0 1px oklch(0 0 0 / 0.05)"
   },
-  ".media-default-skin--video .media-slider__preview": {
-    "--media-preview-max-width": "11rem",
-    "--media-preview-padding": "-1.125rem",
+  ".media-default-skin--video .media-slider__thumbnail": {
+    "--media-slider-thumbnail-max-width": "11rem",
+    "--media-slider-thumbnail-max-height": "8rem",
+    "--media-slider-thumbnail-padding": "-1.125rem",
     /*
-     * *
      * Inset is the difference between the container width and the slider (100%) width.
      * Divided by 2 as we render the time on both sides.
      */
-    "--media-preview-inset": "calc((100cqi - 100%) / 2)",
+    "--media-slider-thumbnail-inset": "calc((100cqi - 100%) / 2)",
     position: "absolute",
     bottom: "calc(100% + 1.2rem)",
-    left: "clamp( calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding) - var(--media-preview-inset)), var(--media-slider-pointer), calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset)) )",
+    left: "clamp( calc( var(--media-slider-thumbnail-max-width) / 2 + var(--media-slider-thumbnail-padding) - var(--media-slider-thumbnail-inset) ), var(--media-slider-pointer), calc( 100% - var(--media-slider-thumbnail-max-width) / 2 - var(--media-slider-thumbnail-padding) + var(--media-slider-thumbnail-inset) ) )",
     pointerEvents: "none",
     opacity: "0",
     filter: "blur(8px)",
@@ -1269,22 +1498,23 @@ const t = (e) => ({
     transitionTimingFunction: "ease-out",
     transitionDuration: "150ms",
     transitionProperty: "scale, opacity, filter",
-    "& .media-preview__thumbnail": {
-      maxWidth: "var(--media-preview-max-width)"
-    },
-    "&:has(.media-preview__thumbnail[data-loading])": {
-      maxHeight: "6rem"
+    "& .media-thumbnail__image": {
+      maxWidth: "var(--media-slider-thumbnail-max-width)",
+      maxHeight: "var(--media-slider-thumbnail-max-height)"
     }
   },
-  '.media-default-skin--video .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden]))': {
+  '.media-default-skin--video .media-slider[data-pointing] .media-slider__thumbnail:has([role="img"]:not([data-hidden]))': {
     opacity: "1",
     filter: "blur(0)",
     scale: "1"
+  },
+  '.media-default-skin--video .media-slider__thumbnail:has([role="img"]:not([data-hidden])) + .media-slider__preview .media-slider__value': {
+    display: "none"
   }
 }), a = /* @__PURE__ */ new WeakMap(), o = (e) => {
   let i = a.get(e);
   return i || (i = t(e), a.set(e, i)), i;
 };
 export {
-  o as videojsSkinAllStyles
+  o as videojsDefaultSkinAllStyles
 };