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

package/dist/dev/define/audio/minimal-skin.css

@@ -227,6 +227,10 @@ media-container {
   text-shadow: 0 1px 0 var(--shadow-current-color);
   background-color: var(--controls-background-color);
   backdrop-filter: var(--controls-backdrop-filter);
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-time-controls {
@@ -236,12 +240,20 @@ media-container {
   gap: calc(var(--spacing) * 3);
   align-items: center;
   container: media-time-controls / inline-size;
+
+  &:dir(rtl) {
+    flex-direction: row;
+  }
 }
 
 .media-minimal-skin .media-time-group {
   display: flex;
   gap: calc(var(--spacing) * 1);
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-time {
@@ -276,6 +288,10 @@ media-container {
 @container media-root (width > 42rem) {
   .media-minimal-skin .media-time-controls {
     flex-direction: row;
+
+    &:dir(rtl) {
+      flex-direction: row-reverse;
+    }
   }
 
   .media-minimal-skin .media-time--duration,
@@ -474,6 +490,10 @@ media-container {
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-badge {
@@ -496,10 +516,15 @@ media-container {
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-minimal-skin .media-icon--flipped {
+.media-minimal-skin .media-icon--flipped,
+.media-minimal-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
 
+.media-minimal-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
+
 .media-minimal-skin .media-slider {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
@@ -1043,6 +1068,10 @@ media-container {
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1084,7 +1113,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;
@@ -1128,8 +1157,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;
   }
 
@@ -1162,8 +1190,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;
@@ -1180,8 +1208,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);
   }
 
@@ -1221,6 +1249,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 {

package/dist/dev/define/audio/skin.css

@@ -252,6 +252,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 {
@@ -261,6 +265,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;
@@ -465,6 +473,10 @@ media-container {
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-default-skin .media-badge {
@@ -487,10 +499,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-slider {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
@@ -1035,6 +1052,10 @@ media-container {
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1077,7 +1098,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;
@@ -1121,8 +1142,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 {
@@ -1159,8 +1179,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;
@@ -1177,8 +1197,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);
   }
 
@@ -1218,6 +1238,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 {

package/dist/dev/define/live-audio/minimal-skin.css

@@ -227,6 +227,10 @@ media-container {
   text-shadow: 0 1px 0 var(--shadow-current-color);
   background-color: var(--controls-background-color);
   backdrop-filter: var(--controls-backdrop-filter);
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-time-controls {
@@ -236,12 +240,20 @@ media-container {
   gap: calc(var(--spacing) * 3);
   align-items: center;
   container: media-time-controls / inline-size;
+
+  &:dir(rtl) {
+    flex-direction: row;
+  }
 }
 
 .media-minimal-skin .media-time-group {
   display: flex;
   gap: calc(var(--spacing) * 1);
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-time {
@@ -276,6 +288,10 @@ media-container {
 @container media-root (width > 42rem) {
   .media-minimal-skin .media-time-controls {
     flex-direction: row;
+
+    &:dir(rtl) {
+      flex-direction: row-reverse;
+    }
   }
 
   .media-minimal-skin .media-time--duration,
@@ -474,6 +490,10 @@ media-container {
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-badge {
@@ -496,10 +516,15 @@ media-container {
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-minimal-skin .media-icon--flipped {
+.media-minimal-skin .media-icon--flipped,
+.media-minimal-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
 
+.media-minimal-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
+
 .media-minimal-skin .media-slider {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
@@ -1043,6 +1068,10 @@ media-container {
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1084,7 +1113,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;
@@ -1128,8 +1157,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;
   }
 
@@ -1162,8 +1190,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;
@@ -1180,8 +1208,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);
   }
 
@@ -1221,6 +1249,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 {

package/dist/dev/define/live-audio/skin.css

@@ -252,6 +252,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 {
@@ -261,6 +265,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;
@@ -465,6 +473,10 @@ media-container {
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-default-skin .media-badge {
@@ -487,10 +499,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-slider {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
@@ -1035,6 +1052,10 @@ media-container {
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1077,7 +1098,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;
@@ -1121,8 +1142,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 {
@@ -1159,8 +1179,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;
@@ -1177,8 +1197,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);
   }
 
@@ -1218,6 +1238,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 {

package/dist/dev/define/live-video/minimal-skin.css

@@ -285,6 +285,10 @@ media-container {
   text-shadow: 0 1px 0 var(--shadow-current-color);
   background-color: var(--controls-background-color);
   backdrop-filter: var(--controls-backdrop-filter);
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-time-controls {
@@ -294,12 +298,20 @@ media-container {
   gap: calc(var(--spacing) * 3);
   align-items: center;
   container: media-time-controls / inline-size;
+
+  &:dir(rtl) {
+    flex-direction: row;
+  }
 }
 
 .media-minimal-skin .media-time-group {
   display: flex;
   gap: calc(var(--spacing) * 1);
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-time {
@@ -334,6 +346,10 @@ media-container {
 @container media-root (width > 42rem) {
   .media-minimal-skin .media-time-controls {
     flex-direction: row;
+
+    &:dir(rtl) {
+      flex-direction: row-reverse;
+    }
   }
 
   .media-minimal-skin .media-time--duration,
@@ -532,6 +548,10 @@ media-container {
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-badge {
@@ -554,10 +574,15 @@ media-container {
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-minimal-skin .media-icon--flipped {
+.media-minimal-skin .media-icon--flipped,
+.media-minimal-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
 
+.media-minimal-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
+
 .media-minimal-skin media-poster,
 .media-minimal-skin > img {
   position: absolute;
@@ -1200,6 +1225,10 @@ media-container {
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1241,7 +1270,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;
@@ -1285,8 +1314,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;
   }
 
@@ -1319,8 +1347,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;
@@ -1337,8 +1365,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);
   }
 
@@ -1378,6 +1406,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 {

package/dist/dev/define/live-video/minimal-skin.js

@@ -76,7 +76,7 @@ function getTemplateHTML() {
               <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">
                       ${renderIcon("check", { class: "media-icon" })}
                     </media-menu-item-indicator>

package/dist/dev/define/live-video/minimal-skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.js","names":["styles"],"sources":["../../../../src/define/live-video/minimal-skin.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render/minimal';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './minimal-skin.css?inline';\n\n// Register the live video player, container, and minimal UI custom elements.\nimport './minimal-ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\">\n          <img alt=\"\" decoding=\"async\">\n        </slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"media-error\">\n        <div class=\"media-error__dialog\">\n          <div class=\"media-error__content\">\n            <media-alert-dialog-title class=\"media-error__title\"></media-alert-dialog-title>\n            <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n          </div>\n          <div class=\"media-error__actions\">\n            <media-alert-dialog-close class=\"media-button media-button--primary\"></media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls class=\"media-controls\">\n        <media-tooltip-group>\n          <div class=\"media-button-group\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n              ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n\n            <media-live-button class=\"media-button media-button--subtle media-button--live\"></media-live-button>\n\n            <media-mute-button commandfor=\"live-video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            </media-mute-button>\n\n            <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"right\" class=\"media-popover media-popover--volume\">\n              <media-volume-slider class=\"media-slider\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n                <media-slider-track class=\"media-slider__track\">\n                  <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                </media-slider-track>\n                <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n              </media-volume-slider>\n            </media-popover>\n          </div>\n\n          <div class=\"media-time-controls\" aria-hidden=\"true\"></div>\n\n          <div class=\"media-button-group\">\n            <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n              ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n              ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            </media-captions-button>\n            <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"media-popover media-menu media-menu--captions\">\n              <media-captions-radio-group class=\"media-menu__group\">\n                <template>\n                  <media-menu-radio-item class=\"media-menu__item\">\n                    <span data-part=\"label\"></span>\n                    <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                      ${renderIcon('check', { class: 'media-icon' })}\n                    </media-menu-item-indicator>\n                  </media-menu-radio-item>\n                </template>\n              </media-captions-radio-group>\n            </media-menu>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n\n            <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n              ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n              ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n            </media-cast-button>\n            <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n\n            <media-airplay-button commandfor=\"airplay-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--airplay\">\n              ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}\n              ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}            \n            </media-airplay-button>\n            <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n              ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n              ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n              ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n              ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n      <!-- Input Indicators -->\n      <media-status-announcer class=\"media-sr-only\"></media-status-announcer>\n      <div class=\"media-input-indicator-overlay\">\n        <media-volume-indicator hidden class=\"media-volume-indicator\">\n          <media-volume-indicator-fill class=\"media-volume-indicator__content\">\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            <div class=\"media-volume-indicator__progress\" aria-hidden=\"true\"></div>\n            <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n        <media-status-indicator\n          hidden\n          actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n          class=\"media-status-indicator media-status-indicator--state\"\n        >\n          <div class=\"media-status-indicator__content\">\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n            ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            <media-status-indicator-value class=\"media-status-indicator__value\"></media-status-indicator-value>\n          </div>\n        </media-status-indicator>\n        <media-status-indicator hidden actions=\"togglePaused\" class=\"media-status-indicator media-status-indicator--playback\">\n          ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n        </media-status-indicator>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class MinimalLiveVideoSkinElement extends SkinElement {\n  static readonly tagName = 'live-video-minimal-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalLiveVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalLiveVideoSkinElement.tagName]: MinimalLiveVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;AASA,SAAS,kBAAkB;CACzB,OAAgB;;;;;;;;;;;;;UAaR,WAAW,WAAW,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;;;;;;;;gBAmBzC,WAAW,WAAW,EAAE,OAAO,iCAAiC,CAAC,EAAE;gBACnE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;gBAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;;;;;;gBAU/D,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;gBACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;gBACzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;;;;;;;;;;gBAiB3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;gBAC7E,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;wBAQnE,WAAW,SAAS,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;gBAYrD,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;gBACzE,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;;;;;;;;gBAQvE,WAAW,iBAAiB,EAAE,OAAO,uCAAuC,CAAC,EAAE;gBAC/E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;;;;;;;;gBAQ7E,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;gBACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;;;;gBAQrE,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;gBACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgCrF,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;cACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;;;;;;;;;;;cAWzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;cAC7E,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;cACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;cACnF,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;cACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;YAKvE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;YAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;AAK3E;AAEA,IAAa,8BAAb,cAAiD,YAAY;;EACjC,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,oBAAM;;;EACtB,KAAA,WAAA,eAAe,gBAAgB,CAAC;;AACpD;AAEA,WAAW,2BAA2B"}
+{"version":3,"file":"minimal-skin.js","names":["styles"],"sources":["../../../../src/define/live-video/minimal-skin.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render/minimal';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './minimal-skin.css?inline';\n\n// Register the live video player, container, and minimal UI custom elements.\nimport './minimal-ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-minimal-skin media-minimal-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\">\n          <img alt=\"\" decoding=\"async\">\n        </slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"media-error\">\n        <div class=\"media-error__dialog\">\n          <div class=\"media-error__content\">\n            <media-alert-dialog-title class=\"media-error__title\"></media-alert-dialog-title>\n            <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n          </div>\n          <div class=\"media-error__actions\">\n            <media-alert-dialog-close class=\"media-button media-button--primary\"></media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls class=\"media-controls\">\n        <media-tooltip-group>\n          <div class=\"media-button-group\">\n            <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n              ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n              ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n              ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n            </media-play-button>\n            <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n\n            <media-live-button class=\"media-button media-button--subtle media-button--live\"></media-live-button>\n\n            <media-mute-button commandfor=\"live-video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n              ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n              ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n              ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            </media-mute-button>\n\n            <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"right\" class=\"media-popover media-popover--volume\">\n              <media-volume-slider class=\"media-slider\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n                <media-slider-track class=\"media-slider__track\">\n                  <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                </media-slider-track>\n                <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n              </media-volume-slider>\n            </media-popover>\n          </div>\n\n          <div class=\"media-time-controls\" aria-hidden=\"true\"></div>\n\n          <div class=\"media-button-group\">\n            <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n              ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n              ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            </media-captions-button>\n            <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"media-popover media-menu media-menu--captions\">\n              <media-captions-radio-group class=\"media-menu__group\">\n                <template>\n                  <media-menu-radio-item class=\"media-menu__item\">\n                    <bdi data-part=\"label\" dir=\"auto\"></bdi>\n                    <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                      ${renderIcon('check', { class: 'media-icon' })}\n                    </media-menu-item-indicator>\n                  </media-menu-radio-item>\n                </template>\n              </media-captions-radio-group>\n            </media-menu>\n            <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n\n            <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n              ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n              ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n            </media-cast-button>\n            <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n\n            <media-airplay-button commandfor=\"airplay-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--airplay\">\n              ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}\n              ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}            \n            </media-airplay-button>\n            <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n\n            <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n              ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n              ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            </media-pip-button>\n            <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n\n            <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n              ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n              ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            </media-fullscreen-button>\n            <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-tooltip\">\n              <media-tooltip-label></media-tooltip-label>\n              <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n            </media-tooltip>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n      <!-- Input Indicators -->\n      <media-status-announcer class=\"media-sr-only\"></media-status-announcer>\n      <div class=\"media-input-indicator-overlay\">\n        <media-volume-indicator hidden class=\"media-volume-indicator\">\n          <media-volume-indicator-fill class=\"media-volume-indicator__content\">\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            <div class=\"media-volume-indicator__progress\" aria-hidden=\"true\"></div>\n            <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n        <media-status-indicator\n          hidden\n          actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n          class=\"media-status-indicator media-status-indicator--state\"\n        >\n          <div class=\"media-status-indicator__content\">\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n            ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            <media-status-indicator-value class=\"media-status-indicator__value\"></media-status-indicator-value>\n          </div>\n        </media-status-indicator>\n        <media-status-indicator hidden actions=\"togglePaused\" class=\"media-status-indicator media-status-indicator--playback\">\n          ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n        </media-status-indicator>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class MinimalLiveVideoSkinElement extends SkinElement {\n  static readonly tagName = 'live-video-minimal-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalLiveVideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [MinimalLiveVideoSkinElement.tagName]: MinimalLiveVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;;;AASA,SAAS,kBAAkB;CACzB,OAAgB;;;;;;;;;;;;;UAaR,WAAW,WAAW,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;;;;;;;;gBAmBzC,WAAW,WAAW,EAAE,OAAO,iCAAiC,CAAC,EAAE;gBACnE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;gBAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;;;;;;gBAU/D,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;gBACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;gBACzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;;;;;;;;;;gBAiB3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;gBAC7E,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;wBAQnE,WAAW,SAAS,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;gBAYrD,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;gBACzE,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;;;;;;;;gBAQvE,WAAW,iBAAiB,EAAE,OAAO,uCAAuC,CAAC,EAAE;gBAC/E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;;;;;;;;gBAQ7E,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;gBACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;;;;gBAQrE,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;gBACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgCrF,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;cACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;;;;;;;;;;;cAWzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;cAC7E,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;cACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;cACnF,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;cACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;YAKvE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;YAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;AAK3E;AAEA,IAAa,8BAAb,cAAiD,YAAY;;EACjC,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,oBAAM;;;EACtB,KAAA,WAAA,eAAe,gBAAgB,CAAC;;AACpD;AAEA,WAAW,2BAA2B"}