@videojs/html 10.0.0-beta.27 → 10.0.0-beta.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (393) hide show
  1. package/cdn/audio-headless.dev.js +1 -1
  2. package/cdn/audio-headless.js +1 -1
  3. package/cdn/audio-minimal-ui.dev.js +1 -1
  4. package/cdn/audio-minimal-ui.js +1 -1
  5. package/cdn/audio-minimal.dev.js +4 -4
  6. package/cdn/audio-minimal.dev.js.map +1 -1
  7. package/cdn/audio-minimal.js +1 -1
  8. package/cdn/audio-minimal.js.map +1 -1
  9. package/cdn/audio-ui.dev.js +1 -1
  10. package/cdn/audio-ui.js +1 -1
  11. package/cdn/audio.dev.js +4 -4
  12. package/cdn/audio.dev.js.map +1 -1
  13. package/cdn/audio.js +1 -1
  14. package/cdn/audio.js.map +1 -1
  15. package/cdn/background-video-WKumpp49.js +59 -0
  16. package/cdn/background-video-WKumpp49.js.map +1 -0
  17. package/cdn/background-video-YHY_3-lX.js +2 -0
  18. package/cdn/background-video-YHY_3-lX.js.map +1 -0
  19. package/cdn/background.dev.js +3 -56
  20. package/cdn/background.dev.js.map +1 -1
  21. package/cdn/background.js +1 -1
  22. package/cdn/background.js.map +1 -1
  23. package/cdn/bn-CcLIScl6.js +108 -0
  24. package/cdn/bn-CcLIScl6.js.map +1 -0
  25. package/cdn/bn-KcCmQhYd.js +2 -0
  26. package/cdn/bn-KcCmQhYd.js.map +1 -0
  27. package/cdn/compounds-BEO1d3ZM.js +8 -0
  28. package/cdn/compounds-BEO1d3ZM.js.map +1 -0
  29. package/cdn/{compounds-CCvdpvge.js → compounds-nk9RJtBK.js} +8 -15
  30. package/cdn/compounds-nk9RJtBK.js.map +1 -0
  31. package/cdn/container-element-Dd0ZCdhK.js +14 -0
  32. package/cdn/container-element-Dd0ZCdhK.js.map +1 -0
  33. package/cdn/container-element-HHK_KZOE.js +376 -0
  34. package/cdn/container-element-HHK_KZOE.js.map +1 -0
  35. package/cdn/{create-player-BHFyOnWi.js → create-player-DK9WOywd.js} +19 -379
  36. package/cdn/create-player-DK9WOywd.js.map +1 -0
  37. package/cdn/create-player-hSdQMP5p.js +2 -0
  38. package/cdn/create-player-hSdQMP5p.js.map +1 -0
  39. package/cdn/embed-params-D2e8u0d4.js +2 -0
  40. package/cdn/embed-params-D2e8u0d4.js.map +1 -0
  41. package/cdn/embed-params-W6T88S8x.js +39 -0
  42. package/cdn/embed-params-W6T88S8x.js.map +1 -0
  43. package/cdn/{gesture-element-CG-Sx_5t.js → gesture-element-6Ld1YwIL.js} +3 -3
  44. package/cdn/{gesture-element-CG-Sx_5t.js.map → gesture-element-6Ld1YwIL.js.map} +1 -1
  45. package/cdn/gesture-element-BC48ucj9.js +2 -0
  46. package/cdn/{gesture-element-BNfMI8eh.js.map → gesture-element-BC48ucj9.js.map} +1 -1
  47. package/cdn/{hls-js-g1zdcyvE.js → hls-js-BEuVm0u9.js} +3 -2
  48. package/cdn/{hls-js-g1zdcyvE.js.map → hls-js-BEuVm0u9.js.map} +1 -1
  49. package/cdn/hls-js-C4P_b2tT.js +2 -0
  50. package/cdn/{hls-js-6lW7L4th.js.map → hls-js-C4P_b2tT.js.map} +1 -1
  51. package/cdn/hls-js-CATW7NBm.js +2 -0
  52. package/cdn/{hls-js-DCQzjzB5.js.map → hls-js-CATW7NBm.js.map} +1 -1
  53. package/cdn/{hls-js-Cwj8UBx9.js → hls-js-WCNy9MVh.js} +3 -2
  54. package/cdn/{hls-js-Cwj8UBx9.js.map → hls-js-WCNy9MVh.js.map} +1 -1
  55. package/cdn/i18n-CE4KxKuj.js +2 -0
  56. package/cdn/i18n-CE4KxKuj.js.map +1 -0
  57. package/cdn/{i18n-Mtlmj1AA.js → i18n-Ch4t6EjV.js} +2 -2
  58. package/cdn/{i18n-Mtlmj1AA.js.map → i18n-Ch4t6EjV.js.map} +1 -1
  59. package/cdn/i18n-Dc7WM2xd.js +2 -0
  60. package/cdn/{i18n-DfKGl5Rh.js.map → i18n-Dc7WM2xd.js.map} +1 -1
  61. package/cdn/i18n-DyF_NfCk.js +157 -0
  62. package/cdn/i18n-DyF_NfCk.js.map +1 -0
  63. package/cdn/i18n.dev.js +3 -152
  64. package/cdn/i18n.dev.js.map +1 -1
  65. package/cdn/i18n.js +1 -1
  66. package/cdn/i18n.js.map +1 -1
  67. package/cdn/{live-button-element-B_y-ZJBy.js → live-button-element-Bae44kBN.js} +5 -4
  68. package/cdn/live-button-element-Bae44kBN.js.map +1 -0
  69. package/cdn/live-button-element-DaHgnYdw.js +2 -0
  70. package/cdn/{live-button-element-CWfkQUoy.js.map → live-button-element-DaHgnYdw.js.map} +1 -1
  71. package/cdn/live-video-minimal.dev.js +8 -8
  72. package/cdn/live-video-minimal.dev.js.map +1 -1
  73. package/cdn/live-video-minimal.js +1 -1
  74. package/cdn/live-video-minimal.js.map +1 -1
  75. package/cdn/live-video.dev.js +9 -9
  76. package/cdn/live-video.dev.js.map +1 -1
  77. package/cdn/live-video.js +1 -1
  78. package/cdn/live-video.js.map +1 -1
  79. package/cdn/locales/bn.dev.js +1 -1
  80. package/cdn/locales/bn.js +1 -1
  81. package/cdn/media/background-video.dev.d.ts +1 -0
  82. package/cdn/media/background-video.dev.js +3 -0
  83. package/cdn/media/background-video.js +1 -0
  84. package/cdn/media/cloudflare-video.dev.d.ts +1 -0
  85. package/cdn/media/cloudflare-video.dev.js +668 -0
  86. package/cdn/media/cloudflare-video.dev.js.map +1 -0
  87. package/cdn/media/cloudflare-video.js +2 -0
  88. package/cdn/media/cloudflare-video.js.map +1 -0
  89. package/cdn/media/container.dev.d.ts +1 -0
  90. package/cdn/media/container.dev.js +8 -0
  91. package/cdn/media/container.dev.js.map +1 -0
  92. package/cdn/media/container.js +2 -0
  93. package/cdn/media/container.js.map +1 -0
  94. package/cdn/media/dash-video.dev.js +2 -1
  95. package/cdn/media/dash-video.js +2 -2
  96. package/cdn/media/dash-video.js.map +1 -1
  97. package/cdn/media/google-cast.dev.js +2 -31
  98. package/cdn/media/google-cast.dev.js.map +1 -1
  99. package/cdn/media/google-cast.js +3 -3
  100. package/cdn/media/google-cast.js.map +1 -1
  101. package/cdn/media/hls-audio.dev.js +1 -0
  102. package/cdn/media/hls-audio.js +1 -1
  103. package/cdn/media/hls-audio.js.map +1 -1
  104. package/cdn/media/hls-background-video.dev.js +2 -1
  105. package/cdn/media/hls-background-video.js +1 -1
  106. package/cdn/media/hls-background-video.js.map +1 -1
  107. package/cdn/media/hls-video.dev.js +2 -1
  108. package/cdn/media/hls-video.js +1 -1
  109. package/cdn/media/hls-video.js.map +1 -1
  110. package/cdn/media/hlsjs-video.dev.js +2 -1
  111. package/cdn/media/hlsjs-video.js +1 -1
  112. package/cdn/media/hlsjs-video.js.map +1 -1
  113. package/cdn/media/mux-audio/hls-js.dev.js +3 -1
  114. package/cdn/media/mux-audio/hls-js.js +1 -1
  115. package/cdn/media/mux-audio/spf.dev.js +1 -0
  116. package/cdn/media/mux-audio/spf.js +1 -1
  117. package/cdn/media/mux-audio/spf.js.map +1 -1
  118. package/cdn/media/mux-audio.dev.js +3 -1
  119. package/cdn/media/mux-audio.js +1 -1
  120. package/cdn/media/mux-background-video.dev.js +2 -1
  121. package/cdn/media/mux-background-video.js +1 -1
  122. package/cdn/media/mux-background-video.js.map +1 -1
  123. package/cdn/media/mux-data.dev.js +2 -1
  124. package/cdn/media/mux-data.dev.js.map +1 -1
  125. package/cdn/media/mux-data.js +2 -2
  126. package/cdn/media/mux-data.js.map +1 -1
  127. package/cdn/media/mux-video/hls-js.dev.js +3 -1
  128. package/cdn/media/mux-video/hls-js.js +1 -1
  129. package/cdn/media/mux-video/spf.dev.js +2 -1
  130. package/cdn/media/mux-video/spf.js +1 -1
  131. package/cdn/media/mux-video/spf.js.map +1 -1
  132. package/cdn/media/mux-video.dev.js +3 -1
  133. package/cdn/media/mux-video.js +1 -1
  134. package/cdn/media/native-hls-video.dev.js +1 -0
  135. package/cdn/media/native-hls-video.js +1 -1
  136. package/cdn/media/native-hls-video.js.map +1 -1
  137. package/cdn/media/spotify-audio.dev.d.ts +1 -0
  138. package/cdn/media/spotify-audio.dev.js +605 -0
  139. package/cdn/media/spotify-audio.dev.js.map +1 -0
  140. package/cdn/media/spotify-audio.js +2 -0
  141. package/cdn/media/spotify-audio.js.map +1 -0
  142. package/cdn/media/tiktok-video.dev.d.ts +1 -0
  143. package/cdn/media/tiktok-video.dev.js +636 -0
  144. package/cdn/media/tiktok-video.dev.js.map +1 -0
  145. package/cdn/media/tiktok-video.js +2 -0
  146. package/cdn/media/tiktok-video.js.map +1 -0
  147. package/cdn/media/twitch-video.dev.d.ts +1 -0
  148. package/cdn/media/twitch-video.dev.js +627 -0
  149. package/cdn/media/twitch-video.dev.js.map +1 -0
  150. package/cdn/media/twitch-video.js +2 -0
  151. package/cdn/media/twitch-video.js.map +1 -0
  152. package/cdn/media/vimeo-video.dev.d.ts +1 -0
  153. package/cdn/media/vimeo-video.dev.js +2989 -0
  154. package/cdn/media/vimeo-video.dev.js.map +1 -0
  155. package/cdn/media/vimeo-video.js +16 -0
  156. package/cdn/media/vimeo-video.js.map +1 -0
  157. package/cdn/media/youtube-video.dev.d.ts +1 -0
  158. package/cdn/media/youtube-video.dev.js +713 -0
  159. package/cdn/media/youtube-video.dev.js.map +1 -0
  160. package/cdn/media/youtube-video.js +2 -0
  161. package/cdn/media/youtube-video.js.map +1 -0
  162. package/cdn/{media-Cp3acYc8.js → media-BavrGKqa.js} +274 -5
  163. package/cdn/media-BavrGKqa.js.map +1 -0
  164. package/cdn/media-Bmablv4g.js +2 -0
  165. package/cdn/media-Bmablv4g.js.map +1 -0
  166. package/cdn/{media-B_gQXwri.js → media-COIe3uI5.js} +12 -3
  167. package/cdn/media-COIe3uI5.js.map +1 -0
  168. package/cdn/{media-CbWsJJhU.js → media-CPVSKLdk.js} +2 -2
  169. package/cdn/{media-CbWsJJhU.js.map → media-CPVSKLdk.js.map} +1 -1
  170. package/cdn/media-CanBm0Jh.js +41 -0
  171. package/cdn/media-CanBm0Jh.js.map +1 -0
  172. package/cdn/{media-Dq4zmIJa2.js → media-Dq4zmIJa.js} +1 -1
  173. package/cdn/media-Dq4zmIJa.js.map +1 -0
  174. package/cdn/{media-DRo3n8tM.js → media-oa3nyL2o.js} +3 -3
  175. package/cdn/{media-DRo3n8tM.js.map → media-oa3nyL2o.js.map} +1 -1
  176. package/cdn/media-played-ranges-CM2zeOGr.js +2 -0
  177. package/cdn/media-played-ranges-CM2zeOGr.js.map +1 -0
  178. package/cdn/media-played-ranges-Yd9acuMt.js +156 -0
  179. package/cdn/media-played-ranges-Yd9acuMt.js.map +1 -0
  180. package/cdn/{media-suYcjCG22.js → media-suYcjCG2.js} +1 -1
  181. package/cdn/media-suYcjCG2.js.map +1 -0
  182. package/cdn/minimal-ui-8iRZf_72.js +2 -0
  183. package/cdn/{minimal-ui-AFk6Ut5f.js.map → minimal-ui-8iRZf_72.js.map} +1 -1
  184. package/cdn/{minimal-ui--JsmpU2q.js → minimal-ui-BpHxIo4z.js} +5 -5
  185. package/cdn/{minimal-ui--JsmpU2q.js.map → minimal-ui-BpHxIo4z.js.map} +1 -1
  186. package/cdn/{minimal-ui-Bxcpf5Mb.js → minimal-ui-CRKvUmB8.js} +9 -9
  187. package/cdn/{minimal-ui-Bxcpf5Mb.js.map → minimal-ui-CRKvUmB8.js.map} +1 -1
  188. package/cdn/minimal-ui-Et2Wcn7r.js +2 -0
  189. package/cdn/{minimal-ui-BVKu9LWj.js.map → minimal-ui-Et2Wcn7r.js.map} +1 -1
  190. package/cdn/mixin-BqN0V06a.js +2 -0
  191. package/cdn/{mixin-DiB7dIef.js.map → mixin-BqN0V06a.js.map} +1 -1
  192. package/cdn/{mixin-CkNZwQXF.js → mixin-C193v40v.js} +67 -67
  193. package/cdn/mixin-C193v40v.js.map +1 -0
  194. package/cdn/noop-BxkeRIz9.js +6 -0
  195. package/cdn/noop-BxkeRIz9.js.map +1 -0
  196. package/cdn/noop-Ch0IHcOP.js +2 -0
  197. package/cdn/noop-Ch0IHcOP.js.map +1 -0
  198. package/cdn/{player-D4fdOLLk.js → player-B2oraRyD.js} +3 -2
  199. package/cdn/{player-D4fdOLLk.js.map → player-B2oraRyD.js.map} +1 -1
  200. package/cdn/player-BRQLp5bX.js +2 -0
  201. package/cdn/{player-srq1RGTj.js.map → player-BRQLp5bX.js.map} +1 -1
  202. package/cdn/player-BloX4l6F.js +2 -0
  203. package/cdn/{player-iIewo8Y9.js.map → player-BloX4l6F.js.map} +1 -1
  204. package/cdn/{player-B0qnepD5.js → player-CKTAtwit.js} +3 -2
  205. package/cdn/{player-B0qnepD5.js.map → player-CKTAtwit.js.map} +1 -1
  206. package/cdn/{player-C4ix6TQq.js → player-DM9rUXg-.js} +3 -2
  207. package/cdn/{player-C4ix6TQq.js.map → player-DM9rUXg-.js.map} +1 -1
  208. package/cdn/player-rCFqzWrA.js +2 -0
  209. package/cdn/{player-B0ccW5-n.js.map → player-rCFqzWrA.js.map} +1 -1
  210. package/cdn/{poster-element-BP1Ypgbf.js → poster-element-BGr1VQJB.js} +16 -4
  211. package/cdn/poster-element-BGr1VQJB.js.map +1 -0
  212. package/cdn/poster-element-DBmgOyep.js +2 -0
  213. package/cdn/poster-element-DBmgOyep.js.map +1 -0
  214. package/cdn/script-D3ZkiqwO.js +2 -0
  215. package/cdn/script-D3ZkiqwO.js.map +1 -0
  216. package/cdn/script-erPJaaTz.js +33 -0
  217. package/cdn/script-erPJaaTz.js.map +1 -0
  218. package/cdn/seek-button-element-FlgBVoGM.js +2 -0
  219. package/cdn/seek-button-element-FlgBVoGM.js.map +1 -0
  220. package/cdn/{seek-button-element-TErrbilI.js → seek-button-element-XMTLIxZj.js} +6 -5
  221. package/cdn/seek-button-element-XMTLIxZj.js.map +1 -0
  222. package/cdn/{skin-element-wPSb4AAs.js → skin-element-DL-Kqa5f.js} +2 -2
  223. package/cdn/{skin-element-wPSb4AAs.js.map → skin-element-DL-Kqa5f.js.map} +1 -1
  224. package/cdn/{skin-element-1_MG2zgS.js → skin-element-DNytI-uu.js} +2 -2
  225. package/cdn/{skin-element-1_MG2zgS.js.map → skin-element-DNytI-uu.js.map} +1 -1
  226. package/cdn/{text-element-DTB9_2HX.js → text-element-D88ArbZz.js} +3 -3
  227. package/cdn/{text-element-DTB9_2HX.js.map → text-element-D88ArbZz.js.map} +1 -1
  228. package/cdn/text-element-DeWBNKXb.js +2 -0
  229. package/cdn/{text-element-Bsyglab8.js.map → text-element-DeWBNKXb.js.map} +1 -1
  230. package/cdn/{time-slider-chapters-element-DPgaLdBt.js → time-slider-chapters-element-DJ0abZXI.js} +5 -4
  231. package/cdn/time-slider-chapters-element-DJ0abZXI.js.map +1 -0
  232. package/cdn/time-slider-chapters-element-DW8YyJn8.js +2 -0
  233. package/cdn/{time-slider-chapters-element-MdlcovBu.js.map → time-slider-chapters-element-DW8YyJn8.js.map} +1 -1
  234. package/cdn/{translate-text-DP0CzUCC.js → translate-text-BWvoW5-r.js} +2 -7
  235. package/cdn/translate-text-BWvoW5-r.js.map +1 -0
  236. package/cdn/translate-text-TzSgu_oe.js +2 -0
  237. package/cdn/translate-text-TzSgu_oe.js.map +1 -0
  238. package/cdn/{ui-D0AokGxw.js → ui-BU3_2gDQ.js} +8 -8
  239. package/cdn/{ui-D0AokGxw.js.map → ui-BU3_2gDQ.js.map} +1 -1
  240. package/cdn/{ui-p36Szn71.js → ui-BsaWWE4y.js} +10 -10
  241. package/cdn/{ui-p36Szn71.js.map → ui-BsaWWE4y.js.map} +1 -1
  242. package/cdn/ui-C0isALTQ.js +2 -0
  243. package/cdn/{ui-CecDxhTX.js.map → ui-C0isALTQ.js.map} +1 -1
  244. package/cdn/ui-DVpkE1MN.js +2 -0
  245. package/cdn/{ui-ChWM6Xz2.js.map → ui-DVpkE1MN.js.map} +1 -1
  246. package/cdn/video-headless.dev.js +1 -1
  247. package/cdn/video-headless.js +1 -1
  248. package/cdn/video-minimal-ui.dev.js +1 -1
  249. package/cdn/video-minimal-ui.js +1 -1
  250. package/cdn/video-minimal.dev.js +4 -4
  251. package/cdn/video-minimal.dev.js.map +1 -1
  252. package/cdn/video-minimal.js +1 -1
  253. package/cdn/video-minimal.js.map +1 -1
  254. package/cdn/video-ui.dev.js +1 -1
  255. package/cdn/video-ui.js +1 -1
  256. package/cdn/video.dev.js +5 -5
  257. package/cdn/video.dev.js.map +1 -1
  258. package/cdn/video.js +1 -1
  259. package/cdn/video.js.map +1 -1
  260. package/dist/default/_virtual/inline-css_src/define/audio/minimal-skin.js +1 -1
  261. package/dist/default/_virtual/inline-css_src/define/audio/minimal-skin.js.map +1 -1
  262. package/dist/default/_virtual/inline-css_src/define/audio/skin.js +1 -1
  263. package/dist/default/_virtual/inline-css_src/define/audio/skin.js.map +1 -1
  264. package/dist/default/_virtual/inline-css_src/define/live-audio/minimal-skin.js +1 -1
  265. package/dist/default/_virtual/inline-css_src/define/live-audio/minimal-skin.js.map +1 -1
  266. package/dist/default/_virtual/inline-css_src/define/live-audio/skin.js +1 -1
  267. package/dist/default/_virtual/inline-css_src/define/live-audio/skin.js.map +1 -1
  268. package/dist/default/_virtual/inline-css_src/define/live-video/minimal-skin.js +1 -1
  269. package/dist/default/_virtual/inline-css_src/define/live-video/minimal-skin.js.map +1 -1
  270. package/dist/default/_virtual/inline-css_src/define/live-video/skin.js +1 -1
  271. package/dist/default/_virtual/inline-css_src/define/live-video/skin.js.map +1 -1
  272. package/dist/default/_virtual/inline-css_src/define/video/minimal-skin.js +1 -1
  273. package/dist/default/_virtual/inline-css_src/define/video/minimal-skin.js.map +1 -1
  274. package/dist/default/_virtual/inline-css_src/define/video/skin.js +1 -1
  275. package/dist/default/_virtual/inline-css_src/define/video/skin.js.map +1 -1
  276. package/dist/default/define/audio/minimal-skin.css +16 -19
  277. package/dist/default/define/audio/skin.css +27 -30
  278. package/dist/default/define/live-audio/minimal-skin.css +16 -19
  279. package/dist/default/define/live-audio/skin.css +27 -30
  280. package/dist/default/define/live-video/minimal-skin.css +20 -19
  281. package/dist/default/define/live-video/skin.css +31 -30
  282. package/dist/default/define/video/minimal-skin.css +20 -19
  283. package/dist/default/define/video/skin.css +31 -30
  284. package/dist/default/media/tiktok-video/media.js +3 -2
  285. package/dist/default/media/tiktok-video/media.js.map +1 -1
  286. package/dist/default/skins/dist/default/default/tailwind/components/slider.js +6 -6
  287. package/dist/default/skins/dist/default/default/tailwind/components/slider.js.map +1 -1
  288. package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js +1 -1
  289. package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
  290. package/dist/default/skins/dist/default/minimal/tailwind/components/slider.js +4 -4
  291. package/dist/default/skins/dist/default/minimal/tailwind/components/slider.js.map +1 -1
  292. package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js +1 -1
  293. package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
  294. package/dist/default/ui/playback-rate-button/playback-rate-button-element.js +1 -2
  295. package/dist/default/ui/playback-rate-button/playback-rate-button-element.js.map +1 -1
  296. package/dist/dev/_virtual/inline-css_src/define/audio/minimal-skin.js +1 -1
  297. package/dist/dev/_virtual/inline-css_src/define/audio/minimal-skin.js.map +1 -1
  298. package/dist/dev/_virtual/inline-css_src/define/audio/skin.js +1 -1
  299. package/dist/dev/_virtual/inline-css_src/define/audio/skin.js.map +1 -1
  300. package/dist/dev/_virtual/inline-css_src/define/live-audio/minimal-skin.js +1 -1
  301. package/dist/dev/_virtual/inline-css_src/define/live-audio/minimal-skin.js.map +1 -1
  302. package/dist/dev/_virtual/inline-css_src/define/live-audio/skin.js +1 -1
  303. package/dist/dev/_virtual/inline-css_src/define/live-audio/skin.js.map +1 -1
  304. package/dist/dev/_virtual/inline-css_src/define/live-video/minimal-skin.js +1 -1
  305. package/dist/dev/_virtual/inline-css_src/define/live-video/minimal-skin.js.map +1 -1
  306. package/dist/dev/_virtual/inline-css_src/define/live-video/skin.js +1 -1
  307. package/dist/dev/_virtual/inline-css_src/define/live-video/skin.js.map +1 -1
  308. package/dist/dev/_virtual/inline-css_src/define/video/minimal-skin.js +1 -1
  309. package/dist/dev/_virtual/inline-css_src/define/video/minimal-skin.js.map +1 -1
  310. package/dist/dev/_virtual/inline-css_src/define/video/skin.js +1 -1
  311. package/dist/dev/_virtual/inline-css_src/define/video/skin.js.map +1 -1
  312. package/dist/dev/define/audio/minimal-skin.css +16 -19
  313. package/dist/dev/define/audio/skin.css +27 -30
  314. package/dist/dev/define/live-audio/minimal-skin.css +16 -19
  315. package/dist/dev/define/live-audio/skin.css +27 -30
  316. package/dist/dev/define/live-video/minimal-skin.css +20 -19
  317. package/dist/dev/define/live-video/skin.css +31 -30
  318. package/dist/dev/define/video/minimal-skin.css +20 -19
  319. package/dist/dev/define/video/skin.css +31 -30
  320. package/dist/dev/media/tiktok-video/media.d.ts.map +1 -1
  321. package/dist/dev/media/tiktok-video/media.js +10 -7
  322. package/dist/dev/media/tiktok-video/media.js.map +1 -1
  323. package/dist/dev/packages/skins/dist/default/default/tailwind/components/slider.js +6 -6
  324. package/dist/dev/packages/skins/dist/default/default/tailwind/components/slider.js.map +1 -1
  325. package/dist/dev/packages/skins/dist/default/default/tailwind/video.tailwind.js +1 -1
  326. package/dist/dev/packages/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
  327. package/dist/dev/packages/skins/dist/default/minimal/tailwind/components/slider.js +4 -4
  328. package/dist/dev/packages/skins/dist/default/minimal/tailwind/components/slider.js.map +1 -1
  329. package/dist/dev/packages/skins/dist/default/minimal/tailwind/video.tailwind.js +1 -1
  330. package/dist/dev/packages/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
  331. package/dist/dev/ui/playback-rate-button/playback-rate-button-element.d.ts.map +1 -1
  332. package/dist/dev/ui/playback-rate-button/playback-rate-button-element.js +1 -2
  333. package/dist/dev/ui/playback-rate-button/playback-rate-button-element.js.map +1 -1
  334. package/docs/README.md +1 -1
  335. package/docs/concepts/features.md +2 -2
  336. package/docs/concepts/media-sources.md +79 -1
  337. package/docs/concepts/skins.md +31 -30
  338. package/docs/how-to/build-your-own-component.md +1 -1
  339. package/docs/how-to/customize-skins.md +94 -98
  340. package/docs/how-to/migrate-from-media-chrome.md +359 -0
  341. package/docs/how-to/migrate-from-mux-player.md +535 -0
  342. package/docs/how-to/migrate-from-plyr.md +394 -0
  343. package/docs/how-to/migrate-from-video-js-8.md +594 -0
  344. package/docs/llms.txt +9 -0
  345. package/docs/reference/feature-volume.md +3 -1
  346. package/docs/reference/mute-button.md +34 -0
  347. package/docs/reference/volume-slider.md +1 -1
  348. package/package.json +10 -9
  349. package/cdn/bn-DdelKD_n.js +0 -108
  350. package/cdn/bn-DdelKD_n.js.map +0 -1
  351. package/cdn/bn-YS8ruMcO.js +0 -2
  352. package/cdn/bn-YS8ruMcO.js.map +0 -1
  353. package/cdn/compounds-CCvdpvge.js.map +0 -1
  354. package/cdn/compounds-CJ6SbYAh.js +0 -8
  355. package/cdn/compounds-CJ6SbYAh.js.map +0 -1
  356. package/cdn/create-player-BHFyOnWi.js.map +0 -1
  357. package/cdn/create-player-CbpxjDaZ.js +0 -14
  358. package/cdn/create-player-CbpxjDaZ.js.map +0 -1
  359. package/cdn/gesture-element-BNfMI8eh.js +0 -2
  360. package/cdn/hls-js-6lW7L4th.js +0 -2
  361. package/cdn/hls-js-DCQzjzB5.js +0 -2
  362. package/cdn/i18n-DfKGl5Rh.js +0 -2
  363. package/cdn/live-button-element-B_y-ZJBy.js.map +0 -1
  364. package/cdn/live-button-element-CWfkQUoy.js +0 -2
  365. package/cdn/media-5ODYtX1-.js +0 -2
  366. package/cdn/media-5ODYtX1-.js.map +0 -1
  367. package/cdn/media-B_gQXwri.js.map +0 -1
  368. package/cdn/media-CPWNSZFX.js +0 -41
  369. package/cdn/media-CPWNSZFX.js.map +0 -1
  370. package/cdn/media-Cp3acYc8.js.map +0 -1
  371. package/cdn/media-Dq4zmIJa2.js.map +0 -1
  372. package/cdn/media-suYcjCG22.js.map +0 -1
  373. package/cdn/minimal-ui-AFk6Ut5f.js +0 -2
  374. package/cdn/minimal-ui-BVKu9LWj.js +0 -2
  375. package/cdn/mixin-CkNZwQXF.js.map +0 -1
  376. package/cdn/mixin-DiB7dIef.js +0 -2
  377. package/cdn/player-B0ccW5-n.js +0 -2
  378. package/cdn/player-iIewo8Y9.js +0 -2
  379. package/cdn/player-srq1RGTj.js +0 -2
  380. package/cdn/poster-element-BP1Ypgbf.js.map +0 -1
  381. package/cdn/poster-element-S-rr412t.js +0 -2
  382. package/cdn/poster-element-S-rr412t.js.map +0 -1
  383. package/cdn/seek-button-element-DxLmm58Y.js +0 -2
  384. package/cdn/seek-button-element-DxLmm58Y.js.map +0 -1
  385. package/cdn/seek-button-element-TErrbilI.js.map +0 -1
  386. package/cdn/text-element-Bsyglab8.js +0 -2
  387. package/cdn/time-slider-chapters-element-DPgaLdBt.js.map +0 -1
  388. package/cdn/time-slider-chapters-element-MdlcovBu.js +0 -2
  389. package/cdn/translate-text-BPMWpzFm.js +0 -2
  390. package/cdn/translate-text-BPMWpzFm.js.map +0 -1
  391. package/cdn/translate-text-DP0CzUCC.js.map +0 -1
  392. package/cdn/ui-CecDxhTX.js +0 -2
  393. package/cdn/ui-ChWM6Xz2.js +0 -2
@@ -665,8 +665,8 @@ media-container {
665
665
 
666
666
  .media-slider__chapter {
667
667
  --chapter-gap: calc(var(--spacing) * 1);
668
- --chapter-inset-start: 0.5;
669
- --chapter-inset-end: 0.5;
668
+ --chapter-inset-start: calc(var(--chapter-gap) / 2);
669
+ --chapter-inset-end: calc(var(--chapter-gap) / 2);
670
670
  position: absolute;
671
671
  inset: 0;
672
672
  display: flex;
@@ -676,10 +676,10 @@ media-container {
676
676
  min-height: 0;
677
677
 
678
678
  &:first-child {
679
- --chapter-inset-start: 0;
679
+ --chapter-inset-start: 0px;
680
680
  }
681
681
  &:last-child {
682
- --chapter-inset-end: 0;
682
+ --chapter-inset-end: 0px;
683
683
  }
684
684
 
685
685
  .media-slider__chapter-track {
@@ -699,9 +699,8 @@ media-container {
699
699
  .media-slider__chapter-track {
700
700
  height: var(--chapter-track-size);
701
701
  clip-path: inset(
702
- 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
703
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
704
- var(--track-border-radius)
702
+ 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
703
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
705
704
  );
706
705
  }
707
706
 
@@ -716,9 +715,8 @@ media-container {
716
715
  .media-slider__chapter-track {
717
716
  width: var(--chapter-track-size);
718
717
  clip-path: inset(
719
- calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
720
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
721
- var(--track-border-radius)
718
+ calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
719
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
722
720
  );
723
721
  }
724
722
 
@@ -830,15 +828,6 @@ media-container {
830
828
  transition-property: opacity, scale;
831
829
  }
832
830
 
833
- &[data-pointing] .media-slider__value,
834
- &[data-pointing] .media-slider__thumbnail,
835
- &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__value,
836
- &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__thumbnail {
837
- opacity: 1;
838
- filter: blur(0);
839
- scale: 1;
840
- }
841
-
842
831
  &[data-orientation="horizontal"]::before {
843
832
  top: 50%;
844
833
  left: var(--media-slider-pointer);
@@ -857,6 +846,14 @@ media-container {
857
846
  scale: 1;
858
847
  }
859
848
  }
849
+
850
+ &:is([data-pointing], :has(:focus-visible))
851
+ .media-slider__preview
852
+ :is(.media-slider__value, .media-slider__thumbnail) {
853
+ opacity: 1;
854
+ filter: blur(0);
855
+ scale: 1;
856
+ }
860
857
  }
861
858
 
862
859
  .media-minimal-skin {
@@ -492,9 +492,14 @@ media-container {
492
492
  }
493
493
 
494
494
  .media-default-skin .media-slider {
495
+ --track-size: calc(var(--spacing) * 1);
496
+ --track-highlighted-size: calc(var(--spacing) * 1.75);
497
+ --track-border-radius: 99px;
495
498
  --thumb-size: calc(var(--spacing) * 2.5);
496
499
  --thumb-active-size: calc(var(--spacing) * 3);
497
- --track-border-radius: calc(Infinity * 1px);
500
+ --chapter-gap: calc(var(--spacing) * 1);
501
+ --chapter-inset-start: calc(var(--chapter-gap) / 2);
502
+ --chapter-inset-end: calc(var(--chapter-gap) / 2);
498
503
 
499
504
  position: relative;
500
505
  display: flex;
@@ -525,10 +530,10 @@ media-container {
525
530
 
526
531
  &[data-orientation="horizontal"] {
527
532
  width: 100%;
528
- height: calc(var(--spacing) * 1);
533
+ height: var(--track-size);
529
534
  }
530
535
  &[data-orientation="vertical"] {
531
- width: calc(var(--spacing) * 1);
536
+ width: var(--track-size);
532
537
  height: 100%;
533
538
  }
534
539
  }
@@ -600,10 +605,6 @@ media-container {
600
605
  }
601
606
 
602
607
  .media-slider__chapter {
603
- --chapter-gap: calc(var(--spacing) * 1);
604
- --chapter-inset-start: 0.5;
605
- --chapter-inset-end: 0.5;
606
-
607
608
  position: absolute;
608
609
  inset: 0;
609
610
  display: flex;
@@ -614,16 +615,13 @@ media-container {
614
615
  border-radius: inherit;
615
616
 
616
617
  &:first-child {
617
- --chapter-inset-start: 0;
618
+ --chapter-inset-start: 0px;
618
619
  }
619
620
  &:last-child {
620
- --chapter-inset-end: 0;
621
+ --chapter-inset-end: 0px;
621
622
  }
622
623
 
623
624
  .media-slider__chapter-track {
624
- --chapter-track-size: calc(var(--spacing) * 1);
625
- --chapter-track-highlighted-size: calc(var(--spacing) * 1.75);
626
-
627
625
  border-radius: inherit;
628
626
 
629
627
  @media (prefers-reduced-motion: no-preference) {
@@ -636,16 +634,15 @@ media-container {
636
634
  clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
637
635
 
638
636
  .media-slider__chapter-track {
639
- height: var(--chapter-track-size);
637
+ height: var(--track-size);
640
638
  clip-path: inset(
641
- 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
642
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
643
- var(--track-border-radius)
639
+ 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
640
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
644
641
  );
645
642
  }
646
643
 
647
644
  &[data-highlighted] .media-slider__chapter-track {
648
- height: var(--chapter-track-highlighted-size);
645
+ height: var(--track-highlighted-size);
649
646
  }
650
647
  }
651
648
 
@@ -653,16 +650,15 @@ media-container {
653
650
  clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
654
651
 
655
652
  .media-slider__chapter-track {
656
- width: var(--chapter-track-size);
653
+ width: var(--track-size);
657
654
  clip-path: inset(
658
- calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
659
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
660
- var(--track-border-radius)
655
+ calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
656
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
661
657
  );
662
658
  }
663
659
 
664
660
  &[data-highlighted] .media-slider__chapter-track {
665
- width: var(--chapter-track-highlighted-size);
661
+ width: var(--track-highlighted-size);
666
662
  }
667
663
  }
668
664
  }
@@ -822,7 +818,7 @@ media-container {
822
818
  .media-slider__chapter-title {
823
819
  min-width: 0;
824
820
  max-width: var(--max-width);
825
- padding-inline: calc(var(--spacing) * 3);
821
+ padding-inline: calc(var(--spacing) * 6);
826
822
  overflow: hidden;
827
823
  text-overflow: ellipsis;
828
824
  white-space: nowrap;
@@ -853,14 +849,15 @@ media-container {
853
849
  transition-duration: 200ms;
854
850
  transition-property: opacity, scale;
855
851
  }
852
+ }
856
853
 
857
- &[data-pointing]:not([data-dragging])::before,
858
- &[data-pointing] :is(.media-slider__thumbnail, .media-slider__value),
859
- &[data-interactive]:not([data-pointing]):not([data-dragging]) :is(.media-slider__value, .media-slider__thumbnail) {
860
- opacity: 1;
861
- filter: blur(0);
862
- scale: 1;
863
- }
854
+ &:is([data-pointing], :has(:focus-visible))
855
+ .media-slider__preview
856
+ :is(.media-slider__value, .media-slider__thumbnail),
857
+ .media-slider__preview[data-pointing]:not([data-dragging])::before {
858
+ opacity: 1;
859
+ filter: blur(0);
860
+ scale: 1;
864
861
  }
865
862
  }
866
863
 
@@ -665,8 +665,8 @@ media-container {
665
665
 
666
666
  .media-slider__chapter {
667
667
  --chapter-gap: calc(var(--spacing) * 1);
668
- --chapter-inset-start: 0.5;
669
- --chapter-inset-end: 0.5;
668
+ --chapter-inset-start: calc(var(--chapter-gap) / 2);
669
+ --chapter-inset-end: calc(var(--chapter-gap) / 2);
670
670
  position: absolute;
671
671
  inset: 0;
672
672
  display: flex;
@@ -676,10 +676,10 @@ media-container {
676
676
  min-height: 0;
677
677
 
678
678
  &:first-child {
679
- --chapter-inset-start: 0;
679
+ --chapter-inset-start: 0px;
680
680
  }
681
681
  &:last-child {
682
- --chapter-inset-end: 0;
682
+ --chapter-inset-end: 0px;
683
683
  }
684
684
 
685
685
  .media-slider__chapter-track {
@@ -699,9 +699,8 @@ media-container {
699
699
  .media-slider__chapter-track {
700
700
  height: var(--chapter-track-size);
701
701
  clip-path: inset(
702
- 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
703
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
704
- var(--track-border-radius)
702
+ 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
703
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
705
704
  );
706
705
  }
707
706
 
@@ -716,9 +715,8 @@ media-container {
716
715
  .media-slider__chapter-track {
717
716
  width: var(--chapter-track-size);
718
717
  clip-path: inset(
719
- calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
720
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
721
- var(--track-border-radius)
718
+ calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
719
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
722
720
  );
723
721
  }
724
722
 
@@ -830,15 +828,6 @@ media-container {
830
828
  transition-property: opacity, scale;
831
829
  }
832
830
 
833
- &[data-pointing] .media-slider__value,
834
- &[data-pointing] .media-slider__thumbnail,
835
- &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__value,
836
- &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__thumbnail {
837
- opacity: 1;
838
- filter: blur(0);
839
- scale: 1;
840
- }
841
-
842
831
  &[data-orientation="horizontal"]::before {
843
832
  top: 50%;
844
833
  left: var(--media-slider-pointer);
@@ -857,6 +846,14 @@ media-container {
857
846
  scale: 1;
858
847
  }
859
848
  }
849
+
850
+ &:is([data-pointing], :has(:focus-visible))
851
+ .media-slider__preview
852
+ :is(.media-slider__value, .media-slider__thumbnail) {
853
+ opacity: 1;
854
+ filter: blur(0);
855
+ scale: 1;
856
+ }
860
857
  }
861
858
 
862
859
  .media-minimal-skin {
@@ -492,9 +492,14 @@ media-container {
492
492
  }
493
493
 
494
494
  .media-default-skin .media-slider {
495
+ --track-size: calc(var(--spacing) * 1);
496
+ --track-highlighted-size: calc(var(--spacing) * 1.75);
497
+ --track-border-radius: 99px;
495
498
  --thumb-size: calc(var(--spacing) * 2.5);
496
499
  --thumb-active-size: calc(var(--spacing) * 3);
497
- --track-border-radius: calc(Infinity * 1px);
500
+ --chapter-gap: calc(var(--spacing) * 1);
501
+ --chapter-inset-start: calc(var(--chapter-gap) / 2);
502
+ --chapter-inset-end: calc(var(--chapter-gap) / 2);
498
503
 
499
504
  position: relative;
500
505
  display: flex;
@@ -525,10 +530,10 @@ media-container {
525
530
 
526
531
  &[data-orientation="horizontal"] {
527
532
  width: 100%;
528
- height: calc(var(--spacing) * 1);
533
+ height: var(--track-size);
529
534
  }
530
535
  &[data-orientation="vertical"] {
531
- width: calc(var(--spacing) * 1);
536
+ width: var(--track-size);
532
537
  height: 100%;
533
538
  }
534
539
  }
@@ -600,10 +605,6 @@ media-container {
600
605
  }
601
606
 
602
607
  .media-slider__chapter {
603
- --chapter-gap: calc(var(--spacing) * 1);
604
- --chapter-inset-start: 0.5;
605
- --chapter-inset-end: 0.5;
606
-
607
608
  position: absolute;
608
609
  inset: 0;
609
610
  display: flex;
@@ -614,16 +615,13 @@ media-container {
614
615
  border-radius: inherit;
615
616
 
616
617
  &:first-child {
617
- --chapter-inset-start: 0;
618
+ --chapter-inset-start: 0px;
618
619
  }
619
620
  &:last-child {
620
- --chapter-inset-end: 0;
621
+ --chapter-inset-end: 0px;
621
622
  }
622
623
 
623
624
  .media-slider__chapter-track {
624
- --chapter-track-size: calc(var(--spacing) * 1);
625
- --chapter-track-highlighted-size: calc(var(--spacing) * 1.75);
626
-
627
625
  border-radius: inherit;
628
626
 
629
627
  @media (prefers-reduced-motion: no-preference) {
@@ -636,16 +634,15 @@ media-container {
636
634
  clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
637
635
 
638
636
  .media-slider__chapter-track {
639
- height: var(--chapter-track-size);
637
+ height: var(--track-size);
640
638
  clip-path: inset(
641
- 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
642
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
643
- var(--track-border-radius)
639
+ 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
640
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
644
641
  );
645
642
  }
646
643
 
647
644
  &[data-highlighted] .media-slider__chapter-track {
648
- height: var(--chapter-track-highlighted-size);
645
+ height: var(--track-highlighted-size);
649
646
  }
650
647
  }
651
648
 
@@ -653,16 +650,15 @@ media-container {
653
650
  clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
654
651
 
655
652
  .media-slider__chapter-track {
656
- width: var(--chapter-track-size);
653
+ width: var(--track-size);
657
654
  clip-path: inset(
658
- calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
659
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
660
- var(--track-border-radius)
655
+ calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
656
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
661
657
  );
662
658
  }
663
659
 
664
660
  &[data-highlighted] .media-slider__chapter-track {
665
- width: var(--chapter-track-highlighted-size);
661
+ width: var(--track-highlighted-size);
666
662
  }
667
663
  }
668
664
  }
@@ -822,7 +818,7 @@ media-container {
822
818
  .media-slider__chapter-title {
823
819
  min-width: 0;
824
820
  max-width: var(--max-width);
825
- padding-inline: calc(var(--spacing) * 3);
821
+ padding-inline: calc(var(--spacing) * 6);
826
822
  overflow: hidden;
827
823
  text-overflow: ellipsis;
828
824
  white-space: nowrap;
@@ -853,14 +849,15 @@ media-container {
853
849
  transition-duration: 200ms;
854
850
  transition-property: opacity, scale;
855
851
  }
852
+ }
856
853
 
857
- &[data-pointing]:not([data-dragging])::before,
858
- &[data-pointing] :is(.media-slider__thumbnail, .media-slider__value),
859
- &[data-interactive]:not([data-pointing]):not([data-dragging]) :is(.media-slider__value, .media-slider__thumbnail) {
860
- opacity: 1;
861
- filter: blur(0);
862
- scale: 1;
863
- }
854
+ &:is([data-pointing], :has(:focus-visible))
855
+ .media-slider__preview
856
+ :is(.media-slider__value, .media-slider__thumbnail),
857
+ .media-slider__preview[data-pointing]:not([data-dragging])::before {
858
+ opacity: 1;
859
+ filter: blur(0);
860
+ scale: 1;
864
861
  }
865
862
  }
866
863
 
@@ -847,8 +847,8 @@ media-container {
847
847
 
848
848
  .media-slider__chapter {
849
849
  --chapter-gap: calc(var(--spacing) * 1);
850
- --chapter-inset-start: 0.5;
851
- --chapter-inset-end: 0.5;
850
+ --chapter-inset-start: calc(var(--chapter-gap) / 2);
851
+ --chapter-inset-end: calc(var(--chapter-gap) / 2);
852
852
  position: absolute;
853
853
  inset: 0;
854
854
  display: flex;
@@ -858,10 +858,10 @@ media-container {
858
858
  min-height: 0;
859
859
 
860
860
  &:first-child {
861
- --chapter-inset-start: 0;
861
+ --chapter-inset-start: 0px;
862
862
  }
863
863
  &:last-child {
864
- --chapter-inset-end: 0;
864
+ --chapter-inset-end: 0px;
865
865
  }
866
866
 
867
867
  .media-slider__chapter-track {
@@ -881,9 +881,8 @@ media-container {
881
881
  .media-slider__chapter-track {
882
882
  height: var(--chapter-track-size);
883
883
  clip-path: inset(
884
- 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
885
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
886
- var(--track-border-radius)
884
+ 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
885
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
887
886
  );
888
887
  }
889
888
 
@@ -898,9 +897,8 @@ media-container {
898
897
  .media-slider__chapter-track {
899
898
  width: var(--chapter-track-size);
900
899
  clip-path: inset(
901
- calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
902
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
903
- var(--track-border-radius)
900
+ calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
901
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
904
902
  );
905
903
  }
906
904
 
@@ -1012,15 +1010,6 @@ media-container {
1012
1010
  transition-property: opacity, scale;
1013
1011
  }
1014
1012
 
1015
- &[data-pointing] .media-slider__value,
1016
- &[data-pointing] .media-slider__thumbnail,
1017
- &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__value,
1018
- &[data-interactive]:not([data-pointing]):not([data-dragging]) .media-slider__thumbnail {
1019
- opacity: 1;
1020
- filter: blur(0);
1021
- scale: 1;
1022
- }
1023
-
1024
1013
  &[data-orientation="horizontal"]::before {
1025
1014
  top: 50%;
1026
1015
  left: var(--media-slider-pointer);
@@ -1039,6 +1028,14 @@ media-container {
1039
1028
  scale: 1;
1040
1029
  }
1041
1030
  }
1031
+
1032
+ &:is([data-pointing], :has(:focus-visible))
1033
+ .media-slider__preview
1034
+ :is(.media-slider__value, .media-slider__thumbnail) {
1035
+ opacity: 1;
1036
+ filter: blur(0);
1037
+ scale: 1;
1038
+ }
1042
1039
  }
1043
1040
 
1044
1041
  .media-minimal-skin {
@@ -1876,6 +1873,10 @@ media-container {
1876
1873
  --scale: 1.75;
1877
1874
  }
1878
1875
  }
1876
+
1877
+ * {
1878
+ --focus-ring-color: oklch(1 0 0);
1879
+ }
1879
1880
  }
1880
1881
 
1881
1882
  /* Error Dialog */
@@ -666,9 +666,14 @@ media-container {
666
666
  }
667
667
 
668
668
  .media-default-skin .media-slider {
669
+ --track-size: calc(var(--spacing) * 1);
670
+ --track-highlighted-size: calc(var(--spacing) * 1.75);
671
+ --track-border-radius: 99px;
669
672
  --thumb-size: calc(var(--spacing) * 2.5);
670
673
  --thumb-active-size: calc(var(--spacing) * 3);
671
- --track-border-radius: calc(Infinity * 1px);
674
+ --chapter-gap: calc(var(--spacing) * 1);
675
+ --chapter-inset-start: calc(var(--chapter-gap) / 2);
676
+ --chapter-inset-end: calc(var(--chapter-gap) / 2);
672
677
 
673
678
  position: relative;
674
679
  display: flex;
@@ -699,10 +704,10 @@ media-container {
699
704
 
700
705
  &[data-orientation="horizontal"] {
701
706
  width: 100%;
702
- height: calc(var(--spacing) * 1);
707
+ height: var(--track-size);
703
708
  }
704
709
  &[data-orientation="vertical"] {
705
- width: calc(var(--spacing) * 1);
710
+ width: var(--track-size);
706
711
  height: 100%;
707
712
  }
708
713
  }
@@ -774,10 +779,6 @@ media-container {
774
779
  }
775
780
 
776
781
  .media-slider__chapter {
777
- --chapter-gap: calc(var(--spacing) * 1);
778
- --chapter-inset-start: 0.5;
779
- --chapter-inset-end: 0.5;
780
-
781
782
  position: absolute;
782
783
  inset: 0;
783
784
  display: flex;
@@ -788,16 +789,13 @@ media-container {
788
789
  border-radius: inherit;
789
790
 
790
791
  &:first-child {
791
- --chapter-inset-start: 0;
792
+ --chapter-inset-start: 0px;
792
793
  }
793
794
  &:last-child {
794
- --chapter-inset-end: 0;
795
+ --chapter-inset-end: 0px;
795
796
  }
796
797
 
797
798
  .media-slider__chapter-track {
798
- --chapter-track-size: calc(var(--spacing) * 1);
799
- --chapter-track-highlighted-size: calc(var(--spacing) * 1.75);
800
-
801
799
  border-radius: inherit;
802
800
 
803
801
  @media (prefers-reduced-motion: no-preference) {
@@ -810,16 +808,15 @@ media-container {
810
808
  clip-path: inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start));
811
809
 
812
810
  .media-slider__chapter-track {
813
- height: var(--chapter-track-size);
811
+ height: var(--track-size);
814
812
  clip-path: inset(
815
- 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
816
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) round
817
- var(--track-border-radius)
813
+ 0 calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
814
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) round var(--track-border-radius)
818
815
  );
819
816
  }
820
817
 
821
818
  &[data-highlighted] .media-slider__chapter-track {
822
- height: var(--chapter-track-highlighted-size);
819
+ height: var(--track-highlighted-size);
823
820
  }
824
821
  }
825
822
 
@@ -827,16 +824,15 @@ media-container {
827
824
  clip-path: inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0);
828
825
 
829
826
  .media-slider__chapter-track {
830
- width: var(--chapter-track-size);
827
+ width: var(--track-size);
831
828
  clip-path: inset(
832
- calc(100% - var(--media-slider-chapter-end) + var(--chapter-gap) * var(--chapter-inset-end)) 0
833
- calc(var(--media-slider-chapter-start) + var(--chapter-gap) * var(--chapter-inset-start)) 0 round
834
- var(--track-border-radius)
829
+ calc(100% - var(--media-slider-chapter-end) + var(--chapter-inset-end)) 0
830
+ calc(var(--media-slider-chapter-start) + var(--chapter-inset-start)) 0 round var(--track-border-radius)
835
831
  );
836
832
  }
837
833
 
838
834
  &[data-highlighted] .media-slider__chapter-track {
839
- width: var(--chapter-track-highlighted-size);
835
+ width: var(--track-highlighted-size);
840
836
  }
841
837
  }
842
838
  }
@@ -996,7 +992,7 @@ media-container {
996
992
  .media-slider__chapter-title {
997
993
  min-width: 0;
998
994
  max-width: var(--max-width);
999
- padding-inline: calc(var(--spacing) * 3);
995
+ padding-inline: calc(var(--spacing) * 6);
1000
996
  overflow: hidden;
1001
997
  text-overflow: ellipsis;
1002
998
  white-space: nowrap;
@@ -1027,14 +1023,15 @@ media-container {
1027
1023
  transition-duration: 200ms;
1028
1024
  transition-property: opacity, scale;
1029
1025
  }
1026
+ }
1030
1027
 
1031
- &[data-pointing]:not([data-dragging])::before,
1032
- &[data-pointing] :is(.media-slider__thumbnail, .media-slider__value),
1033
- &[data-interactive]:not([data-pointing]):not([data-dragging]) :is(.media-slider__value, .media-slider__thumbnail) {
1034
- opacity: 1;
1035
- filter: blur(0);
1036
- scale: 1;
1037
- }
1028
+ &:is([data-pointing], :has(:focus-visible))
1029
+ .media-slider__preview
1030
+ :is(.media-slider__value, .media-slider__thumbnail),
1031
+ .media-slider__preview[data-pointing]:not([data-dragging])::before {
1032
+ opacity: 1;
1033
+ filter: blur(0);
1034
+ scale: 1;
1038
1035
  }
1039
1036
  }
1040
1037
 
@@ -1838,6 +1835,10 @@ media-container {
1838
1835
  --scale: 1.75;
1839
1836
  }
1840
1837
  }
1838
+
1839
+ * {
1840
+ --focus-ring-color: oklch(1 0 0);
1841
+ }
1841
1842
  }
1842
1843
 
1843
1844
  /* Error Dialog */