@videojs/html 10.0.0-beta.30 → 10.0.0-beta.31

package/docs/concepts/skins.md

@@ -166,7 +166,7 @@ CSS
                     <media-icon name="switches" class="media-icon"></media-icon>
                     <media-text token="menu.quality">Quality</media-text>
                     <span class="media-menu__hint">
-                      <span data-part="hint" class="media-menu__hint-label"></span>
+                      <bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi>
                       <media-icon name="chevron" class="media-icon media-menu__chevron"></media-icon>
                     </span>
                   </media-menu-item>
@@ -174,7 +174,7 @@ CSS
                     <media-icon name="speech" class="media-icon"></media-icon>
                     <media-text token="menu.audio">Audio</media-text>
                     <span class="media-menu__hint">
-                      <span data-part="hint" class="media-menu__hint-label"></span>
+                      <bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi>
                       <media-icon name="chevron" class="media-icon media-menu__chevron"></media-icon>
                     </span>
                   </media-menu-item>
@@ -182,7 +182,7 @@ CSS
                     <media-icon name="speed" class="media-icon"></media-icon>
                     <media-text token="menu.speed">Speed</media-text>
                     <span class="media-menu__hint">
-                      <span data-part="hint" class="media-menu__hint-label"></span>
+                      <bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi>
                       <media-icon name="chevron" class="media-icon media-menu__chevron"></media-icon>
                     </span>
                   </media-menu-item>
@@ -190,7 +190,7 @@ CSS
                     <media-icon name="captions-off" class="media-icon"></media-icon>
                     <media-text token="menu.captions">Captions</media-text>
                     <span class="media-menu__hint">
-                      <span data-part="hint" class="media-menu__hint-label"></span>
+                      <bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi>
                       <media-icon name="chevron" class="media-icon media-menu__chevron"></media-icon>
                     </span>
                   </media-menu-item>
@@ -206,7 +206,7 @@ CSS
                   <template>
                     <media-menu-radio-item class="media-menu__item">
                       <span>
-                        <span data-part="label"></span>
+                        <bdi data-part="label" dir="auto"></bdi>
                         <sup data-part="tier" class="media-menu__tier"></sup>
                       </span>
                       <span data-part="badge" class="media-badge"></span>
@@ -227,7 +227,7 @@ CSS
                 <media-audio-track-radio-group class="media-menu__group">
                   <template>
                     <media-menu-radio-item class="media-menu__item">
-                      <span data-part="label"></span>
+                      <bdi data-part="label" dir="auto"></bdi>
                       <media-menu-item-indicator force-mount class="media-menu__indicator">
                         <media-icon name="check" class="media-icon"></media-icon>
                       </media-menu-item-indicator>
@@ -245,7 +245,7 @@ CSS
                 <media-playback-rate-radio-group class="media-menu__group">
                   <template>
                     <media-menu-radio-item class="media-menu__item">
-                      <span data-part="label"></span>
+                      <bdi data-part="label" dir="auto"></bdi>
                       <media-menu-item-indicator force-mount class="media-menu__indicator">
                         <media-icon name="check" class="media-icon"></media-icon>
                       </media-menu-item-indicator>
@@ -263,7 +263,7 @@ CSS
                 <media-captions-radio-group class="media-menu__group">
                   <template>
                     <media-menu-radio-item class="media-menu__item">
-                      <span data-part="label"></span>
+                      <bdi data-part="label" dir="auto"></bdi>
                       <media-menu-item-indicator force-mount class="media-menu__indicator">
                         <media-icon name="check" class="media-icon"></media-icon>
                       </media-menu-item-indicator>
@@ -695,6 +695,10 @@ media-container {
   container: media-controls / inline-size;
   text-shadow: 0 1px 0 var(--shadow-current-color);
   border-radius: calc(Infinity * 1px);
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-default-skin .media-time-controls {
@@ -704,6 +708,10 @@ media-container {
   align-items: center;
   container: media-time-controls / inline-size;
 
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
+
   > .media-time:last-child {
     @container media-time-controls (width < 16rem) {
       display: none;
@@ -908,6 +916,10 @@ media-container {
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-default-skin .media-badge {
@@ -930,10 +942,15 @@ media-container {
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-default-skin .media-icon--flipped {
+.media-default-skin .media-icon--flipped,
+.media-default-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
 
+.media-default-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
+
 .media-default-skin media-poster,
 .media-default-skin > img {
   position: absolute;
@@ -1574,6 +1591,10 @@ media-container {
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1616,7 +1637,7 @@ media-container {
     gap: calc(var(--spacing) * 1.5);
     align-items: center;
     padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    text-align: left;
+    text-align: start;
     text-shadow: 0 1px 0 var(--shadow-current-color);
     cursor: pointer;
     user-select: none;
@@ -1660,8 +1681,7 @@ media-container {
 
   .media-menu__indicator {
     flex-shrink: 0;
-    margin-right: calc(var(--spacing) * -1);
-    margin-left: auto;
+    margin-inline: auto calc(var(--spacing) * -1);
     opacity: 0;
 
     .media-icon {
@@ -1698,8 +1718,8 @@ media-container {
   }
 
   .media-menu__tier {
+    padding-inline-start: calc(var(--spacing) * 0.5);
     padding-top: 1px;
-    padding-left: calc(var(--spacing) * 0.5);
     font-size: var(--font-size-tiny);
     font-weight: 600;
     line-height: 1;
@@ -1716,8 +1736,8 @@ media-container {
     gap: calc(var(--spacing) * 1);
     align-items: center;
     min-width: 0;
-    padding-left: calc(var(--spacing) * 2);
-    margin-left: auto;
+    padding-inline-start: calc(var(--spacing) * 2);
+    margin-inline-start: auto;
     color: oklch(from currentColor l c h / 0.65);
   }
 
@@ -1757,6 +1777,10 @@ media-container {
       translate: -100% 0;
     }
 
+    &:dir(rtl)[data-submenu-expanded="true"] > :not([data-submenu]) {
+      translate: 100% 0;
+    }
+
     /* WebKit can restart the covered-content transition while the
        anchor-positioned highlight remains active. */
     &[data-submenu-expanded] > :not([data-submenu])::before {