@mux/mux-player 2.9.1 → 3.0.0

package/dist/themes/gerwig/index.js

@@ -74,6 +74,8 @@ var mediaThemeGerwig = (() => {
       --media-preview-time-text-shadow: none;
       --media-control-height: 14px;
       --media-control-padding: 6px;
+      --media-tooltip-container-margin: 6px;
+      --media-tooltip-distance: 18px;
 
       color: var(--_primary-color);
       display: inline-block;
@@ -175,18 +177,18 @@ var mediaThemeGerwig = (() => {
       border-bottom-width: 0;
     }
 
-    [part~='listbox'] {
+    [part~='menu'] {
       border-radius: 2px;
       border: 1px solid rgba(0, 0, 0, 0.1);
-      bottom: calc(100% + 16px);
+      bottom: 50px;
       padding: 2.5px 10px;
     }
 
-    [part~='listbox']::part(indicator) {
+    [part~='menu']::part(indicator) {
       fill: var(--_accent-color);
     }
 
-    [part~='listbox']::part(option) {
+    [part~='menu']::part(menu-item) {
       box-sizing: border-box;
       display: flex;
       align-items: center;
@@ -194,44 +196,47 @@ var mediaThemeGerwig = (() => {
       min-height: 34px;
     }
 
-    [part~='listbox']::part(option-selected) {
+    [part~='menu']::part(checked) {
       font-weight: 700;
     }
 
-    media-captions-selectmenu,
-    media-rendition-selectmenu,
-    media-audio-track-selectmenu,
-    media-playback-rate-listbox[part~='listbox'] {
-      --media-listbox-background: var(--_primary-color);
-      --media-option-selected-background: transparent;
-      --media-option-hover-background: transparent;
-      --media-option-hover-outline: var(--_accent-color) solid 1px;
+    media-captions-menu,
+    media-rendition-menu,
+    media-audio-track-menu,
+    media-playback-rate-menu {
+      position: absolute; /* ensure they don't take up space in DOM on load */
+      --media-menu-background: var(--_primary-color);
+      --media-menu-item-checked-background: transparent;
       --media-text-color: var(--_text-color);
+      --media-menu-item-hover-background: transparent;
+      --media-menu-item-hover-outline: var(--_accent-color) solid 1px;
     }
 
     /* The icon is a circle so make it 16px high instead of 14px for more balance. */
-    media-audio-track-selectmenu {
+    media-audio-track-menu-button {
       --media-control-padding: 5px;
       --media-control-height: 16px;
     }
 
-    media-playback-rate-button {
+    media-playback-rate-menu-button {
       --media-control-padding: 6px 3px;
       min-width: 4.4ch;
     }
 
-    media-playback-rate-listbox[part~='listbox'] {
-      --media-listbox-layout: row;
-      --media-option-selected-background: var(--_accent-color);
+    media-playback-rate-menu {
+      --media-menu-flex-direction: row;
+      --media-menu-item-checked-background: var(--_accent-color);
+      --media-menu-item-checked-indicator-display: none;
       margin-right: 6px;
       padding: 0;
+      --media-menu-gap: 0.25em;
     }
 
-    media-playback-rate-listbox[part~='listbox']::part(option) {
-      padding: 6px 4px;
+    media-playback-rate-menu[part~='menu']::part(menu-item) {
+      padding: 6px 6px 6px 8px;
     }
 
-    media-playback-rate-listbox[part~='listbox']::part(option-selected) {
+    media-playback-rate-menu[part~='menu']::part(checked) {
       color: #fff;
     }
 
@@ -295,7 +300,7 @@ var mediaThemeGerwig = (() => {
     }
 
     media-control-bar[part~='bottom'] > * {
-      z-index: 2;
+      z-index: 20;
     }
 
     media-control-bar[part~='bottom'] {
@@ -320,6 +325,7 @@ var mediaThemeGerwig = (() => {
     .center-controls {
       --media-button-icon-width: 100%;
       --media-button-icon-height: auto;
+      --media-tooltip-display: none;
       pointer-events: none;
       width: 100%;
       display: flex;
@@ -686,55 +692,55 @@ var mediaThemeGerwig = (() => {
     </media-pip-button>
   </template>
 
-  <template partial="CaptionsMenuButton">
-    <media-captions-selectmenu part="bottom captions selectmenu" disabled="{{disabled}}" aria-disabled="{{disabled}}">
-      <media-captions-button
-        slot="button"
-        part="bottom captions button"
-        disabled="{{disabled}}"
-        aria-disabled="{{disabled}}"
-      >
-        <svg aria-hidden="true" viewBox="0 0 18 14" slot="on">
-          <path
-            d="M15.989 0H2.011C0.9004 0 0 0.9003 0 2.0109V11.9891C0 13.0997 0.9004 14 2.011 14H15.989C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.989 0ZM4.2292 8.7639C4.5954 9.1902 5.0935 9.4031 5.7233 9.4031C6.1852 9.4031 6.5544 9.301 6.8302 9.0969C7.1061 8.8933 7.2863 8.614 7.3702 8.26H8.4322C8.3062 8.884 8.0093 9.3733 7.5411 9.7273C7.0733 10.0813 6.4703 10.2581 5.732 10.2581C5.108 10.2581 4.5699 10.1219 4.1168 9.8489C3.6637 9.5759 3.3141 9.1946 3.0685 8.7058C2.8224 8.2165 2.6994 7.6511 2.6994 7.009C2.6994 6.3611 2.8224 5.7927 3.0685 5.3034C3.3141 4.8146 3.6637 4.4323 4.1168 4.1559C4.5699 3.88 5.108 3.7418 5.732 3.7418C6.4703 3.7418 7.0733 3.922 7.5411 4.2818C8.0094 4.6422 8.3062 5.1461 8.4322 5.794H7.3702C7.2862 5.4283 7.106 5.1368 6.8302 4.921C6.5544 4.7052 6.1852 4.5968 5.7233 4.5968C5.0934 4.5968 4.5954 4.8116 4.2292 5.2404C3.8635 5.6696 3.6804 6.259 3.6804 7.009C3.6804 7.7531 3.8635 8.3381 4.2292 8.7639ZM11.0974 8.7639C11.4636 9.1902 11.9617 9.4031 12.5915 9.4031C13.0534 9.4031 13.4226 9.301 13.6984 9.0969C13.9743 8.8933 14.1545 8.614 14.2384 8.26H15.3004C15.1744 8.884 14.8775 9.3733 14.4093 9.7273C13.9415 10.0813 13.3385 10.2581 12.6002 10.2581C11.9762 10.2581 11.4381 10.1219 10.985 9.8489C10.5319 9.5759 10.1823 9.1946 9.9367 8.7058C9.6906 8.2165 9.5676 7.6511 9.5676 7.009C9.5676 6.3611 9.6906 5.7927 9.9367 5.3034C10.1823 4.8146 10.5319 4.4323 10.985 4.1559C11.4381 3.88 11.9762 3.7418 12.6002 3.7418C13.3385 3.7418 13.9415 3.922 14.4093 4.2818C14.8776 4.6422 15.1744 5.1461 15.3004 5.794H14.2384C14.1544 5.4283 13.9742 5.1368 13.6984 4.921C13.4226 4.7052 13.0534 4.5968 12.5915 4.5968C11.9616 4.5968 11.4636 4.8116 11.0974 5.2404C10.7317 5.6696 10.5486 6.259 10.5486 7.009C10.5486 7.7531 10.7317 8.3381 11.0974 8.7639Z"
-          />
-        </svg>
-        <svg aria-hidden="true" viewBox="0 0 18 14" slot="off">
-          <path
-            d="M5.73219 10.258C5.10819 10.258 4.57009 10.1218 4.11699 9.8488C3.66389 9.5758 3.31429 9.1945 3.06869 8.7057C2.82259 8.2164 2.69958 7.651 2.69958 7.0089C2.69958 6.361 2.82259 5.7926 3.06869 5.3033C3.31429 4.8145 3.66389 4.4322 4.11699 4.1558C4.57009 3.8799 5.10819 3.7417 5.73219 3.7417C6.47049 3.7417 7.07348 3.9219 7.54128 4.2817C8.00958 4.6421 8.30638 5.146 8.43238 5.7939H7.37039C7.28639 5.4282 7.10618 5.1367 6.83039 4.9209C6.55459 4.7051 6.18538 4.5967 5.72348 4.5967C5.09358 4.5967 4.59559 4.8115 4.22939 5.2403C3.86369 5.6695 3.68058 6.2589 3.68058 7.0089C3.68058 7.753 3.86369 8.338 4.22939 8.7638C4.59559 9.1901 5.09368 9.403 5.72348 9.403C6.18538 9.403 6.55459 9.3009 6.83039 9.0968C7.10629 8.8932 7.28649 8.6139 7.37039 8.2599H8.43238C8.30638 8.8839 8.00948 9.3732 7.54128 9.7272C7.07348 10.0812 6.47049 10.258 5.73219 10.258Z"
-          />
-          <path
-            d="M12.6003 10.258C11.9763 10.258 11.4382 10.1218 10.9851 9.8488C10.532 9.5758 10.1824 9.1945 9.93685 8.7057C9.69075 8.2164 9.56775 7.651 9.56775 7.0089C9.56775 6.361 9.69075 5.7926 9.93685 5.3033C10.1824 4.8145 10.532 4.4322 10.9851 4.1558C11.4382 3.8799 11.9763 3.7417 12.6003 3.7417C13.3386 3.7417 13.9416 3.9219 14.4094 4.2817C14.8777 4.6421 15.1745 5.146 15.3005 5.7939H14.2385C14.1545 5.4282 13.9743 5.1367 13.6985 4.9209C13.4227 4.7051 13.0535 4.5967 12.5916 4.5967C11.9617 4.5967 11.4637 4.8115 11.0975 5.2403C10.7318 5.6695 10.5487 6.2589 10.5487 7.0089C10.5487 7.753 10.7318 8.338 11.0975 8.7638C11.4637 9.1901 11.9618 9.403 12.5916 9.403C13.0535 9.403 13.4227 9.3009 13.6985 9.0968C13.9744 8.8932 14.1546 8.6139 14.2385 8.2599H15.3005C15.1745 8.8839 14.8776 9.3732 14.4094 9.7272C13.9416 10.0812 13.3386 10.258 12.6003 10.258Z"
-          />
+  <template partial="CaptionsMenu">
+    <media-captions-menu-button part="bottom captions button">
+      <svg aria-hidden="true" viewBox="0 0 18 14" slot="on">
+        <path
+          d="M15.989 0H2.011C0.9004 0 0 0.9003 0 2.0109V11.9891C0 13.0997 0.9004 14 2.011 14H15.989C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.989 0ZM4.2292 8.7639C4.5954 9.1902 5.0935 9.4031 5.7233 9.4031C6.1852 9.4031 6.5544 9.301 6.8302 9.0969C7.1061 8.8933 7.2863 8.614 7.3702 8.26H8.4322C8.3062 8.884 8.0093 9.3733 7.5411 9.7273C7.0733 10.0813 6.4703 10.2581 5.732 10.2581C5.108 10.2581 4.5699 10.1219 4.1168 9.8489C3.6637 9.5759 3.3141 9.1946 3.0685 8.7058C2.8224 8.2165 2.6994 7.6511 2.6994 7.009C2.6994 6.3611 2.8224 5.7927 3.0685 5.3034C3.3141 4.8146 3.6637 4.4323 4.1168 4.1559C4.5699 3.88 5.108 3.7418 5.732 3.7418C6.4703 3.7418 7.0733 3.922 7.5411 4.2818C8.0094 4.6422 8.3062 5.1461 8.4322 5.794H7.3702C7.2862 5.4283 7.106 5.1368 6.8302 4.921C6.5544 4.7052 6.1852 4.5968 5.7233 4.5968C5.0934 4.5968 4.5954 4.8116 4.2292 5.2404C3.8635 5.6696 3.6804 6.259 3.6804 7.009C3.6804 7.7531 3.8635 8.3381 4.2292 8.7639ZM11.0974 8.7639C11.4636 9.1902 11.9617 9.4031 12.5915 9.4031C13.0534 9.4031 13.4226 9.301 13.6984 9.0969C13.9743 8.8933 14.1545 8.614 14.2384 8.26H15.3004C15.1744 8.884 14.8775 9.3733 14.4093 9.7273C13.9415 10.0813 13.3385 10.2581 12.6002 10.2581C11.9762 10.2581 11.4381 10.1219 10.985 9.8489C10.5319 9.5759 10.1823 9.1946 9.9367 8.7058C9.6906 8.2165 9.5676 7.6511 9.5676 7.009C9.5676 6.3611 9.6906 5.7927 9.9367 5.3034C10.1823 4.8146 10.5319 4.4323 10.985 4.1559C11.4381 3.88 11.9762 3.7418 12.6002 3.7418C13.3385 3.7418 13.9415 3.922 14.4093 4.2818C14.8776 4.6422 15.1744 5.1461 15.3004 5.794H14.2384C14.1544 5.4283 13.9742 5.1368 13.6984 4.921C13.4226 4.7052 13.0534 4.5968 12.5915 4.5968C11.9616 4.5968 11.4636 4.8116 11.0974 5.2404C10.7317 5.6696 10.5486 6.259 10.5486 7.009C10.5486 7.7531 10.7317 8.3381 11.0974 8.7639Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 18 14" slot="off">
+        <path
+          d="M5.73219 10.258C5.10819 10.258 4.57009 10.1218 4.11699 9.8488C3.66389 9.5758 3.31429 9.1945 3.06869 8.7057C2.82259 8.2164 2.69958 7.651 2.69958 7.0089C2.69958 6.361 2.82259 5.7926 3.06869 5.3033C3.31429 4.8145 3.66389 4.4322 4.11699 4.1558C4.57009 3.8799 5.10819 3.7417 5.73219 3.7417C6.47049 3.7417 7.07348 3.9219 7.54128 4.2817C8.00958 4.6421 8.30638 5.146 8.43238 5.7939H7.37039C7.28639 5.4282 7.10618 5.1367 6.83039 4.9209C6.55459 4.7051 6.18538 4.5967 5.72348 4.5967C5.09358 4.5967 4.59559 4.8115 4.22939 5.2403C3.86369 5.6695 3.68058 6.2589 3.68058 7.0089C3.68058 7.753 3.86369 8.338 4.22939 8.7638C4.59559 9.1901 5.09368 9.403 5.72348 9.403C6.18538 9.403 6.55459 9.3009 6.83039 9.0968C7.10629 8.8932 7.28649 8.6139 7.37039 8.2599H8.43238C8.30638 8.8839 8.00948 9.3732 7.54128 9.7272C7.07348 10.0812 6.47049 10.258 5.73219 10.258Z"
+        />
+        <path
+          d="M12.6003 10.258C11.9763 10.258 11.4382 10.1218 10.9851 9.8488C10.532 9.5758 10.1824 9.1945 9.93685 8.7057C9.69075 8.2164 9.56775 7.651 9.56775 7.0089C9.56775 6.361 9.69075 5.7926 9.93685 5.3033C10.1824 4.8145 10.532 4.4322 10.9851 4.1558C11.4382 3.8799 11.9763 3.7417 12.6003 3.7417C13.3386 3.7417 13.9416 3.9219 14.4094 4.2817C14.8777 4.6421 15.1745 5.146 15.3005 5.7939H14.2385C14.1545 5.4282 13.9743 5.1367 13.6985 4.9209C13.4227 4.7051 13.0535 4.5967 12.5916 4.5967C11.9617 4.5967 11.4637 4.8115 11.0975 5.2403C10.7318 5.6695 10.5487 6.2589 10.5487 7.0089C10.5487 7.753 10.7318 8.338 11.0975 8.7638C11.4637 9.1901 11.9618 9.403 12.5916 9.403C13.0535 9.403 13.4227 9.3009 13.6985 9.0968C13.9744 8.8932 14.1546 8.6139 14.2385 8.2599H15.3005C15.1745 8.8839 14.8776 9.3732 14.4094 9.7272C13.9416 10.0812 13.3386 10.258 12.6003 10.258Z"
+        />
+        <path
+          d="M15.9891 1C16.5465 1 17 1.4535 17 2.011V11.9891C17 12.5465 16.5465 13 15.9891 13H2.0109C1.4535 13 1 12.5465 1 11.9891V2.0109C1 1.4535 1.4535 0.9999 2.0109 0.9999L15.9891 1ZM15.9891 0H2.0109C0.9003 0 0 0.9003 0 2.0109V11.9891C0 13.0997 0.9003 14 2.0109 14H15.9891C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.9891 0Z"
+        />
+      </svg>
+    </media-captions-menu-button>
+    <media-captions-menu
+      hidden
+      anchor="auto"
+      part="bottom captions menu"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+      exportparts="menu-item"
+    >
+      <div slot="checked-indicator">
+        <style>
+          .indicator {
+            position: relative;
+            top: 1px;
+            width: 0.9em;
+            height: auto;
+            fill: var(--_accent-color);
+            margin-right: 5px;
+          }
+
+          [aria-checked='false'] .indicator {
+            display: none;
+          }
+        </style>
+        <svg viewBox="0 0 14 18" class="indicator">
           <path
-            d="M15.9891 1C16.5465 1 17 1.4535 17 2.011V11.9891C17 12.5465 16.5465 13 15.9891 13H2.0109C1.4535 13 1 12.5465 1 11.9891V2.0109C1 1.4535 1.4535 0.9999 2.0109 0.9999L15.9891 1ZM15.9891 0H2.0109C0.9003 0 0 0.9003 0 2.0109V11.9891C0 13.0997 0.9003 14 2.0109 14H15.9891C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.9891 0Z"
+            d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
+            fill-rule="evenodd"
           />
-        </svg>
-      </media-captions-button>
-      <media-captions-listbox slot="listbox" exportparts="option" part="bottom captions listbox">
-        <div slot="select-indicator">
-          <style>
-            .listbox-indicator {
-              position: relative;
-              top: 1px;
-              width: 0.9em;
-              height: auto;
-              fill: var(--_accent-color);
-            }
-
-            [aria-selected='false'] .listbox-indicator {
-              display: none;
-            }
-          </style>
-          <svg viewBox="0 0 14 18" class="listbox-indicator">
-            <path
-              d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </div>
-      </media-captions-listbox>
-    </media-captions-selectmenu>
+        </svg></div
+    ></media-captions-menu>
   </template>
 
   <template partial="AirplayButton">
@@ -805,20 +811,17 @@ var mediaThemeGerwig = (() => {
     </media-live-button>
   </template>
 
-  <template partial="PlaybackRateSelect">
-    <media-playback-rate-selectmenu
-      part="bottom playback-rate selectmenu"
+  <template partial="PlaybackRateMenu">
+    <media-playback-rate-menu-button part="bottom playback-rate button"></media-playback-rate-menu-button>
+    <media-playback-rate-menu
+      hidden
+      anchor="auto"
+      rates="{{playbackrates}}"
+      exportparts="menu-item"
+      part="bottom playback-rate menu"
       disabled="{{disabled}}"
       aria-disabled="{{disabled}}"
-    >
-      <media-playback-rate-button slot="button" part="bottom playback-rate button"></media-playback-rate-button>
-      <media-playback-rate-listbox
-        slot="listbox"
-        rates="{{playbackrates}}"
-        exportparts="option"
-        part="bottom playback-rate listbox"
-      ></media-playback-rate-listbox>
-    </media-playback-rate-selectmenu>
+    ></media-playback-rate-menu>
   </template>
 
   <template partial="VolumeRange">
@@ -848,79 +851,86 @@ var mediaThemeGerwig = (() => {
     </media-time-range>
   </template>
 
-  <template partial="AudioTrackSelect">
-    <media-audio-track-selectmenu
-      part="bottom audio-track selectmenu"
+  <template partial="AudioTrackMenu">
+    <media-audio-track-menu-button part="bottom audio-track button">
+      <svg aria-hidden="true" slot="icon" viewBox="0 0 18 16">
+        <path d="M9 15A7 7 0 1 1 9 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 9 0a8 8 0 0 0 0 16Z" />
+        <path
+          d="M5.2 6.3a.5.5 0 0 1 .5.5v2.4a.5.5 0 1 1-1 0V6.8a.5.5 0 0 1 .5-.5Zm2.4-2.4a.5.5 0 0 1 .5.5v7.2a.5.5 0 0 1-1 0V4.4a.5.5 0 0 1 .5-.5ZM10 5.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.4-.8a.5.5 0 0 1 .5.5v5.6a.5.5 0 0 1-1 0V5.2a.5.5 0 0 1 .5-.5Z"
+        />
+      </svg>
+    </media-audio-track-menu-button>
+    <media-audio-track-menu
+      hidden
+      anchor="auto"
+      part="bottom audio-track menu"
       disabled="{{disabled}}"
       aria-disabled="{{disabled}}"
+      exportparts="menu-item"
     >
-      <media-audio-track-button slot="button" part="bottom audio-track button">
-        <svg aria-hidden="true" slot="icon" viewBox="0 0 18 16">
-          <path d="M9 15A7 7 0 1 1 9 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 9 0a8 8 0 0 0 0 16Z" />
+      <div slot="checked-indicator">
+        <style>
+          .indicator {
+            position: relative;
+            top: 1px;
+            width: 0.9em;
+            height: auto;
+            fill: var(--_accent-color);
+            margin-right: 5px;
+          }
+
+          [aria-checked='false'] .indicator {
+            display: none;
+          }
+        </style>
+        <svg viewBox="0 0 14 18" class="indicator">
           <path
-            d="M5.2 6.3a.5.5 0 0 1 .5.5v2.4a.5.5 0 1 1-1 0V6.8a.5.5 0 0 1 .5-.5Zm2.4-2.4a.5.5 0 0 1 .5.5v7.2a.5.5 0 0 1-1 0V4.4a.5.5 0 0 1 .5-.5ZM10 5.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.4-.8a.5.5 0 0 1 .5.5v5.6a.5.5 0 0 1-1 0V5.2a.5.5 0 0 1 .5-.5Z"
+            d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
+            fill-rule="evenodd"
           />
         </svg>
-      </media-audio-track-button>
-      <media-audio-track-listbox slot="listbox" exportparts="option" part="bottom audio-track listbox">
-        <div slot="select-indicator">
-          <style>
-            .listbox-indicator {
-              position: relative;
-              top: 1px;
-              width: 0.9em;
-              height: auto;
-              fill: var(--_accent-color);
-            }
-
-            [aria-selected='false'] .listbox-indicator {
-              display: none;
-            }
-          </style>
-          <svg viewBox="0 0 14 18" class="listbox-indicator">
-            <path
-              d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </div>
-      </media-audio-track-listbox>
-    </media-audio-track-selectmenu>
+      </div>
+    </media-audio-track-menu>
   </template>
 
-  <template partial="RenditionSelect">
-    <media-rendition-selectmenu part="bottom rendition selectmenu" disabled="{{disabled}}" aria-disabled="{{disabled}}">
-      <media-rendition-button slot="button" part="bottom rendition button">
-        <svg aria-hidden="true" slot="icon" viewBox="0 0 18 14">
+  <template partial="RenditionMenu">
+    <media-rendition-menu-button part="bottom rendition button">
+      <svg aria-hidden="true" slot="icon" viewBox="0 0 18 14">
+        <path
+          d="M2.25 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM9 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+        />
+      </svg>
+    </media-rendition-menu-button>
+    <media-rendition-menu
+      hidden
+      anchor="auto"
+      part="bottom rendition menu"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <div slot="checked-indicator">
+        <style>
+          .indicator {
+            position: relative;
+            top: 1px;
+            width: 0.9em;
+            height: auto;
+            fill: var(--_accent-color);
+            margin-right: 5px;
+          }
+
+          [aria-checked='false'] .indicator {
+            display: none;
+          }
+        </style>
+        <svg viewBox="0 0 14 18" class="indicator">
           <path
-            d="M2.25 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM9 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+            d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
+            fill-rule="evenodd"
           />
         </svg>
-      </media-rendition-button>
-      <media-rendition-listbox slot="listbox" exportparts="option" part="bottom rendition listbox">
-        <div slot="select-indicator">
-          <style>
-            .listbox-indicator {
-              position: relative;
-              top: 1px;
-              width: 0.9em;
-              height: auto;
-              fill: var(--_accent-color);
-            }
-
-            [aria-selected='false'] .listbox-indicator {
-              display: none;
-            }
-          </style>
-          <svg viewBox="0 0 14 18" class="listbox-indicator">
-            <path
-              d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </div>
-      </media-rendition-listbox>
-    </media-rendition-selectmenu>
+      </div>
+    </media-rendition-menu>
   </template>
 
   <media-controller
@@ -947,27 +957,13 @@ var mediaThemeGerwig = (() => {
 
     <template if="!audio">
       <!-- Pre-playback UI -->
+      <!-- same for both on-demand and live -->
       <div slot="centered-chrome" class="center-controls pre-playback">
-        <template if="streamtype == 'on-demand'">
-          <template if="!breakpointsm"> {{>SeekBackwardButton section="center"}} </template>
-          <template if="!breakpointsm"> {{>PlayButton section="center"}} </template>
-          <template if="breakpointsm"> {{>PrePlayButton section="center"}} </template>
-          <template if="!breakpointsm"> {{>SeekForwardButton section="center"}} </template>
-        </template>
-
-        <template if="streamtype == 'live'">
-          <template if="!breakpointsm">
-            <template if="targetlivewindow > 0"> {{>SeekBackwardButton section="center"}} </template>
-          </template>
-          <template if="!breakpointsm"> {{>PlayButton section="center"}} </template>
-          <template if="breakpointsm"> {{>PrePlayButton section="center"}} </template>
-          <template if="!breakpointsm">
-            <template if="targetlivewindow > 0"> {{>SeekForwardButton section="center"}} </template>
-          </template>
-        </template>
+        <template if="!breakpointsm">{{>PlayButton section="center"}}</template>
+        <template if="breakpointsm">{{>PrePlayButton section="center"}}</template>
       </div>
 
-      <!-- Auotplay centered unmute button -->
+      <!-- Autoplay centered unmute button -->
       <!--
         todo: figure out how show this with available state variables
         needs to show when:
@@ -995,7 +991,7 @@ var mediaThemeGerwig = (() => {
           {{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeDisplay}} {{>MuteButton}}
           {{>VolumeRange}}
           <div class="spacer"></div>
-          {{>RenditionSelect}} {{>PlaybackRateSelect}} {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}}
+          {{>RenditionMenu}} {{>PlaybackRateMenu}} {{>AudioTrackMenu}} {{>CaptionsMenu}} {{>AirplayButton}}
           {{>CastButton}} {{>PipButton}} {{>FullscreenButton}}
         </media-control-bar>
       </template>
@@ -1011,8 +1007,8 @@ var mediaThemeGerwig = (() => {
           <template if="targetlivewindow > 0">{{>SeekBackwardButton}} {{>SeekForwardButton}}</template>
           {{>MuteButton}} {{>VolumeRange}}
           <div class="spacer"></div>
-          {{>RenditionSelect}} {{>AudioTrackSelect}} {{>CaptionsMenuButton}} {{>AirplayButton}} {{>CastButton}}
-          {{>PipButton}} {{>FullscreenButton}}
+          {{>RenditionMenu}} {{>AudioTrackMenu}} {{>CaptionsMenu}} {{>AirplayButton}} {{>CastButton}} {{>PipButton}}
+          {{>FullscreenButton}}
         </media-control-bar>
       </template>
     </template>
@@ -1028,7 +1024,7 @@ var mediaThemeGerwig = (() => {
           {{>MuteButton}}
           <template if="breakpointsm">{{>VolumeRange}}</template>
           {{>TimeDisplay}} {{>TimeRange}}
-          <template if="breakpointsm">{{>PlaybackRateSelect}}</template>
+          <template if="breakpointsm">{{>PlaybackRateMenu}}</template>
           {{>AirplayButton}} {{>CastButton}}
         </media-control-bar>
       </template>
@@ -1038,8 +1034,9 @@ var mediaThemeGerwig = (() => {
           <media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
         </template>
         <media-control-bar part="control-bar bottom">
+          {{>PlayButton}} {{>LiveButton section="bottom"}} {{>MuteButton}}
           <template if="breakpointsm">
-            {{>PlayButton}} {{>LiveButton section="bottom"}} {{>MuteButton}} {{>VolumeRange}}
+            {{>VolumeRange}}
             <template if="targetlivewindow > 0"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
           </template>
           <template if="targetlivewindow > 0"> {{>TimeDisplay}} {{>TimeRange}} </template>
@@ -1079,6 +1076,9 @@ var mediaThemeGerwig = (() => {
     },
     define(_name, _constructor, _options) {
     },
+    getName(_constructor) {
+      return null;
+    },
     upgrade(_root) {
     },
     whenDefined(_name) {
@@ -1086,7 +1086,7 @@ var mediaThemeGerwig = (() => {
     }
   };
   var _detail;
-  var CustomEvent = class {
+  var CustomEvent2 = class {
     constructor(typeArg, eventInitDict = {}) {
       __privateAdd(this, _detail, void 0);
       __privateSet(this, _detail, eventInitDict == null ? void 0 : eventInitDict.detail);
@@ -1107,7 +1107,7 @@ var mediaThemeGerwig = (() => {
     },
     DocumentFragment,
     customElements,
-    CustomEvent,
+    CustomEvent: CustomEvent2,
     EventTarget,
     HTMLElement,
     HTMLVideoElement
@@ -1117,6 +1117,37 @@ var mediaThemeGerwig = (() => {
   var internalDocument = isServer ? globalThisShim.document : globalThis.document;
 
   // ../../node_modules/media-chrome/dist/constants.js
+  var MediaUIEvents = {
+    MEDIA_PLAY_REQUEST: "mediaplayrequest",
+    MEDIA_PAUSE_REQUEST: "mediapauserequest",
+    MEDIA_MUTE_REQUEST: "mediamuterequest",
+    MEDIA_UNMUTE_REQUEST: "mediaunmuterequest",
+    MEDIA_VOLUME_REQUEST: "mediavolumerequest",
+    MEDIA_SEEK_REQUEST: "mediaseekrequest",
+    MEDIA_AIRPLAY_REQUEST: "mediaairplayrequest",
+    MEDIA_ENTER_FULLSCREEN_REQUEST: "mediaenterfullscreenrequest",
+    MEDIA_EXIT_FULLSCREEN_REQUEST: "mediaexitfullscreenrequest",
+    MEDIA_PREVIEW_REQUEST: "mediapreviewrequest",
+    MEDIA_ENTER_PIP_REQUEST: "mediaenterpiprequest",
+    MEDIA_EXIT_PIP_REQUEST: "mediaexitpiprequest",
+    MEDIA_ENTER_CAST_REQUEST: "mediaentercastrequest",
+    MEDIA_EXIT_CAST_REQUEST: "mediaexitcastrequest",
+    MEDIA_SHOW_TEXT_TRACKS_REQUEST: "mediashowtexttracksrequest",
+    MEDIA_HIDE_TEXT_TRACKS_REQUEST: "mediahidetexttracksrequest",
+    MEDIA_SHOW_SUBTITLES_REQUEST: "mediashowsubtitlesrequest",
+    MEDIA_DISABLE_SUBTITLES_REQUEST: "mediadisablesubtitlesrequest",
+    MEDIA_TOGGLE_SUBTITLES_REQUEST: "mediatogglesubtitlesrequest",
+    MEDIA_PLAYBACK_RATE_REQUEST: "mediaplaybackraterequest",
+    MEDIA_RENDITION_REQUEST: "mediarenditionrequest",
+    MEDIA_AUDIO_TRACK_REQUEST: "mediaaudiotrackrequest",
+    MEDIA_SEEK_TO_LIVE_REQUEST: "mediaseektoliverequest",
+    REGISTER_MEDIA_STATE_RECEIVER: "registermediastatereceiver",
+    UNREGISTER_MEDIA_STATE_RECEIVER: "unregistermediastatereceiver"
+  };
+  var MediaStateReceiverAttributes = {
+    MEDIA_CHROME_ATTRIBUTES: "mediachromeattributes",
+    MEDIA_CONTROLLER: "mediacontroller"
+  };
   var MediaUIProps = {
     MEDIA_AIRPLAY_UNAVAILABLE: "mediaAirplayUnavailable",
     MEDIA_FULLSCREEN_UNAVAILABLE: "mediaFullscreenUnavailable",
@@ -1124,6 +1155,8 @@ var mediaThemeGerwig = (() => {
     MEDIA_CAST_UNAVAILABLE: "mediaCastUnavailable",
     MEDIA_RENDITION_UNAVAILABLE: "mediaRenditionUnavailable",
     MEDIA_AUDIO_TRACK_UNAVAILABLE: "mediaAudioTrackUnavailable",
+    MEDIA_WIDTH: "mediaWidth",
+    MEDIA_HEIGHT: "mediaHeight",
     MEDIA_PAUSED: "mediaPaused",
     MEDIA_HAS_PLAYED: "mediaHasPlayed",
     MEDIA_ENDED: "mediaEnded",
@@ -1156,35 +1189,27 @@ var mediaThemeGerwig = (() => {
     MEDIA_AUDIO_TRACK_ENABLED: "mediaAudioTrackEnabled",
     MEDIA_CHAPTERS_CUES: "mediaChaptersCues"
   };
-  var MediaUIPropsEntries = (
-    /** @type {[keyof MediaUIProps, string][]} */
-    Object.entries(MediaUIProps)
+  var MediaUIPropsEntries = Object.entries(
+    MediaUIProps
   );
-  var MediaUIAttributes = (
-    /** @type {{ [k in keyof MediaUIProps]: string }} */
-    MediaUIPropsEntries.reduce(
-      (dictObj, [key, propName]) => {
-        dictObj[key] = `${propName.toLowerCase()}`;
-        return dictObj;
-      },
-      /** @type {Partial<{ [k in keyof MediaUIProps]: string }>} */
-      {}
-    )
+  var MediaUIAttributes = MediaUIPropsEntries.reduce(
+    (dictObj, [key, propName]) => {
+      dictObj[key] = propName.toLowerCase();
+      return dictObj;
+    },
+    {}
   );
-  var MediaStateChangeEvents = (
-    /** @type {{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string }} */
-    MediaUIPropsEntries.reduce(
-      (dictObj, [key, propName]) => {
-        dictObj[key] = `${propName.toLowerCase()}`;
-        return dictObj;
-      },
-      /** @type {Partial<{ [k in keyof MediaUIProps | 'USER_INACTIVE' | 'BREAKPOINTS_CHANGE' | 'BREAKPOINTS_COMPUTED']: string  }>} */
-      {
-        USER_INACTIVE: "userinactivechange",
-        BREAKPOINTS_CHANGE: "breakpointchange",
-        BREAKPOINTS_COMPUTED: "breakpointscomputed"
-      }
-    )
+  var AdditionalStateChangeEvents = {
+    USER_INACTIVE: "userinactivechange",
+    BREAKPOINTS_CHANGE: "breakpointchange",
+    BREAKPOINTS_COMPUTED: "breakpointscomputed"
+  };
+  var MediaStateChangeEvents = MediaUIPropsEntries.reduce(
+    (dictObj, [key, propName]) => {
+      dictObj[key] = propName.toLowerCase();
+      return dictObj;
+    },
+    { ...AdditionalStateChangeEvents }
   );
   var StateChangeEventToAttributeMap = Object.entries(
     MediaStateChangeEvents
@@ -1210,6 +1235,144 @@ var mediaThemeGerwig = (() => {
     },
     { userinactive: "userinactivechange" }
   );
+  var TextTrackKinds = {
+    SUBTITLES: "subtitles",
+    CAPTIONS: "captions",
+    DESCRIPTIONS: "descriptions",
+    CHAPTERS: "chapters",
+    METADATA: "metadata"
+  };
+
+  // ../../node_modules/media-chrome/dist/utils/element-utils.js
+  function getMediaController(host) {
+    var _a3;
+    return (_a3 = getAttributeMediaController(host)) != null ? _a3 : closestComposedNode(host, "media-controller");
+  }
+  function getAttributeMediaController(host) {
+    var _a3;
+    const { MEDIA_CONTROLLER } = MediaStateReceiverAttributes;
+    const mediaControllerId = host.getAttribute(MEDIA_CONTROLLER);
+    if (mediaControllerId) {
+      return (_a3 = getDocumentOrShadowRoot(host)) == null ? void 0 : _a3.getElementById(
+        mediaControllerId
+      );
+    }
+  }
+  var containsComposedNode = (rootNode, childNode) => {
+    if (!rootNode || !childNode)
+      return false;
+    if (rootNode == null ? void 0 : rootNode.contains(childNode))
+      return true;
+    return containsComposedNode(
+      rootNode,
+      childNode.getRootNode().host
+    );
+  };
+  var closestComposedNode = (childNode, selector) => {
+    if (!childNode)
+      return null;
+    const closest = childNode.closest(selector);
+    if (closest)
+      return closest;
+    return closestComposedNode(
+      childNode.getRootNode().host,
+      selector
+    );
+  };
+  function getActiveElement(root = document) {
+    var _a3;
+    const activeEl = root == null ? void 0 : root.activeElement;
+    if (!activeEl)
+      return null;
+    return (_a3 = getActiveElement(activeEl.shadowRoot)) != null ? _a3 : activeEl;
+  }
+  function getDocumentOrShadowRoot(node) {
+    var _a3;
+    const rootNode = (_a3 = node == null ? void 0 : node.getRootNode) == null ? void 0 : _a3.call(node);
+    if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
+      return rootNode;
+    }
+    return null;
+  }
+  function getOrInsertCSSRule(styleParent, selectorText) {
+    const cssRule = getCSSRule(styleParent, (st) => st === selectorText);
+    if (cssRule)
+      return cssRule;
+    return insertCSSRule(styleParent, selectorText);
+  }
+  function getCSSRule(styleParent, predicate) {
+    var _a3;
+    let style;
+    for (style of styleParent.querySelectorAll("style")) {
+      let cssRules;
+      try {
+        cssRules = (_a3 = style.sheet) == null ? void 0 : _a3.cssRules;
+      } catch {
+        continue;
+      }
+      for (const rule of cssRules != null ? cssRules : []) {
+        if (predicate(rule.selectorText))
+          return rule;
+      }
+    }
+  }
+  function insertCSSRule(styleParent, selectorText) {
+    var _a3, _b2;
+    const styles = (_a3 = styleParent.querySelectorAll("style")) != null ? _a3 : [];
+    const style = styles == null ? void 0 : styles[styles.length - 1];
+    if (!(style == null ? void 0 : style.sheet)) {
+      console.warn(
+        "Media Chrome: No style sheet found on style tag of",
+        styleParent
+      );
+      return {
+        // @ts-ignore
+        style: {
+          setProperty: () => {
+          },
+          removeProperty: () => "",
+          getPropertyValue: () => ""
+        }
+      };
+    }
+    style == null ? void 0 : style.sheet.insertRule(`${selectorText}{}`, style.sheet.cssRules.length);
+    return (
+      /** @type {CSSStyleRule} */
+      (_b2 = style.sheet.cssRules) == null ? void 0 : _b2[style.sheet.cssRules.length - 1]
+    );
+  }
+  function getNumericAttr(el, attrName, defaultValue = Number.NaN) {
+    const attrVal = el.getAttribute(attrName);
+    return attrVal != null ? +attrVal : defaultValue;
+  }
+  function setNumericAttr(el, attrName, value) {
+    const nextNumericValue = +value;
+    if (value == null || Number.isNaN(nextNumericValue)) {
+      if (el.hasAttribute(attrName)) {
+        el.removeAttribute(attrName);
+      }
+      return;
+    }
+    if (getNumericAttr(el, attrName, void 0) === nextNumericValue)
+      return;
+    el.setAttribute(attrName, `${nextNumericValue}`);
+  }
+  function getStringAttr(el, attrName, defaultValue = null) {
+    var _a3;
+    return (_a3 = el.getAttribute(attrName)) != null ? _a3 : defaultValue;
+  }
+  function setStringAttr(el, attrName, value) {
+    if (value == null) {
+      if (el.hasAttribute(attrName)) {
+        el.removeAttribute(attrName);
+      }
+      return;
+    }
+    const nextValue = `${value}`;
+    if (getStringAttr(el, attrName, void 0) === nextValue)
+      return;
+    el.setAttribute(attrName, nextValue);
+  }
 
   // ../../node_modules/media-chrome/dist/utils/server-safe-globals.js
   var EventTarget2 = class {
@@ -1223,6 +1386,12 @@ var mediaThemeGerwig = (() => {
   };
   var Node = class extends EventTarget2 {
   };
+  var Element = class extends Node {
+    constructor() {
+      super(...arguments);
+      this.role = null;
+    }
+  };
   var ResizeObserver = class {
     observe() {
     }
@@ -1255,7 +1424,15 @@ var mediaThemeGerwig = (() => {
     ResizeObserver,
     document: documentShim,
     Node,
-    HTMLElement: class HTMLElement2 extends Node {
+    Element,
+    HTMLElement: class HTMLElement2 extends Element {
+      constructor() {
+        super(...arguments);
+        this.innerHTML = "";
+      }
+      get content() {
+        return new globalThisShim2.DocumentFragment();
+      }
     },
     DocumentFragment: class DocumentFragment2 extends EventTarget2 {
     },
@@ -1281,15 +1458,15 @@ var mediaThemeGerwig = (() => {
        */
       setItem(key, value) {
       },
-      // eslint-disable-line no-unused-vars
+      // eslint-disable-line @typescript-eslint/no-unused-vars
       /**
        * @param {string} key
        */
       removeItem(key) {
       }
-      // eslint-disable-line no-unused-vars
+      // eslint-disable-line @typescript-eslint/no-unused-vars
     },
-    CustomEvent: function CustomEvent2() {
+    CustomEvent: function CustomEvent3() {
     },
     getComputedStyle: function() {
     },
@@ -1312,15 +1489,9 @@ var mediaThemeGerwig = (() => {
   var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";
   var isShimmed = Object.keys(globalThisShim2).every((key) => key in globalThis);
   var GlobalThis = isServer2 && !isShimmed ? globalThisShim2 : globalThis;
-  var Document = isServer2 && !isShimmed ? documentShim : globalThis.document;
+  var Document2 = isServer2 && !isShimmed ? documentShim : globalThis.document;
 
   // ../../node_modules/media-chrome/dist/utils/template-parts.js
-  var __defProp2 = Object.defineProperty;
-  var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __publicField = (obj, key, value) => {
-    __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-    return value;
-  };
   var __accessCheck2 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -1372,15 +1543,15 @@ var mediaThemeGerwig = (() => {
     }
   };
   var TemplateInstance = class extends GlobalThis.DocumentFragment {
-    constructor(template2, state, processor2 = defaultProcessor) {
-      var _a2;
+    constructor(template8, state, processor2 = defaultProcessor) {
+      var _a3;
       super();
       __privateAdd2(this, _parts, void 0);
       __privateAdd2(this, _processor, void 0);
-      this.append(template2.content.cloneNode(true));
+      this.append(template8.content.cloneNode(true));
       __privateSet2(this, _parts, parse(this));
       __privateSet2(this, _processor, processor2);
-      (_a2 = processor2.createCallback) == null ? void 0 : _a2.call(processor2, this, __privateGet2(this, _parts), state);
+      (_a3 = processor2.createCallback) == null ? void 0 : _a3.call(processor2, this, __privateGet2(this, _parts), state);
       processor2.processCallback(this, __privateGet2(this, _parts), state);
     }
     update(state) {
@@ -1391,7 +1562,7 @@ var mediaThemeGerwig = (() => {
   _processor = /* @__PURE__ */ new WeakMap();
   var parse = (element, parts = []) => {
     let type, value;
-    for (let attr of element.attributes || []) {
+    for (const attr of element.attributes || []) {
       if (attr.value.includes("{{")) {
         const list = new AttrPartList();
         for ([type, value] of tokenize(attr.value)) {
@@ -1406,14 +1577,15 @@ var mediaThemeGerwig = (() => {
         attr.value = list.toString();
       }
     }
-    for (let node of element.childNodes) {
+    for (const node of element.childNodes) {
       if (node.nodeType === ELEMENT && !(node instanceof HTMLTemplateElement)) {
         parse(node, parts);
       } else {
-        if (node.nodeType === ELEMENT || node.data.includes("{{")) {
+        const data = node.data;
+        if (node.nodeType === ELEMENT || data.includes("{{")) {
           const items = [];
-          if (node.data) {
-            for ([type, value] of tokenize(node.data))
+          if (data) {
+            for ([type, value] of tokenize(data))
               if (!type)
                 items.push(new Text(value));
               else {
@@ -1541,11 +1713,10 @@ var mediaThemeGerwig = (() => {
         __privateGet2(this, _element).setAttributeNS(
           __privateGet2(this, _namespaceURI),
           __privateGet2(this, _attributeName),
-          __privateGet2(this, _list, list_get)
+          __privateGet2(this, _list, list_get).toString()
         );
       }
     }
-    /** @type boolean */
     get booleanValue() {
       return __privateGet2(this, _element).hasAttributeNS(
         __privateGet2(this, _namespaceURI),
@@ -1611,15 +1782,14 @@ var mediaThemeGerwig = (() => {
   _parentNode = /* @__PURE__ */ new WeakMap();
   _nodes = /* @__PURE__ */ new WeakMap();
   var InnerTemplatePart = class extends ChildNodePart {
-    constructor(parentNode, template2) {
-      let directive = template2.getAttribute("directive") || template2.getAttribute("type");
-      let expression = template2.getAttribute("expression") || template2.getAttribute(directive) || "";
+    constructor(parentNode, template8) {
+      const directive = template8.getAttribute("directive") || template8.getAttribute("type");
+      let expression = template8.getAttribute("expression") || template8.getAttribute(directive) || "";
       if (expression.startsWith("{{"))
         expression = expression.trim().slice(2, -2).trim();
       super(parentNode);
-      __publicField(this, "directive");
       this.expression = expression;
-      this.template = template2;
+      this.template = template8;
       this.directive = directive;
     }
   };
@@ -1653,6 +1823,29 @@ var mediaThemeGerwig = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/utils/utils.js
+  function parseRenditionList(renditions) {
+    return renditions == null ? void 0 : renditions.split(/\s+/).map(parseRendition);
+  }
+  function parseRendition(rendition) {
+    if (rendition) {
+      const [id, width, height] = rendition.split(":");
+      return { id, width: +width, height: +height };
+    }
+  }
+  function parseAudioTrackList(audioTracks) {
+    return audioTracks == null ? void 0 : audioTracks.split(/\s+/).map(parseAudioTrack);
+  }
+  function parseAudioTrack(audioTrack) {
+    if (audioTrack) {
+      const [id, kind, language, label] = audioTrack.split(":");
+      return {
+        id,
+        kind,
+        language,
+        label
+      };
+    }
+  }
   function camelCase(name) {
     return name.replace(/[-_]([a-z])/g, ($0, $1) => $1.toUpperCase());
   }
@@ -1667,8 +1860,8 @@ var mediaThemeGerwig = (() => {
     string: (value) => String(value)
   };
   var PartialTemplate = class {
-    constructor(template2) {
-      this.template = template2;
+    constructor(template8) {
+      this.template = template8;
       this.state = void 0;
     }
   };
@@ -1679,7 +1872,7 @@ var mediaThemeGerwig = (() => {
       state[part.expression] = new PartialTemplate(part.template);
     },
     if: (part, state) => {
-      var _a2;
+      var _a3;
       if (evaluateExpression(part.expression, state)) {
         if (templates.get(part) !== part.template) {
           templates.set(part, part.template);
@@ -1687,7 +1880,7 @@ var mediaThemeGerwig = (() => {
           part.replace(tpl);
           templateInstances.set(part, tpl);
         } else {
-          (_a2 = templateInstances.get(part)) == null ? void 0 : _a2.update(state);
+          (_a3 = templateInstances.get(part)) == null ? void 0 : _a3.update(state);
         }
       } else {
         part.replace("");
@@ -1699,7 +1892,7 @@ var mediaThemeGerwig = (() => {
   var DirectiveNames = Object.keys(Directives);
   var processor = {
     processCallback(instance, parts, state) {
-      var _a2, _b2;
+      var _a3, _b2;
       if (!state)
         return;
       for (const [expression, part] of parts) {
@@ -1713,7 +1906,7 @@ var mediaThemeGerwig = (() => {
               part.expression = part.template.getAttribute(directive);
             }
           }
-          (_a2 = Directives[part.directive]) == null ? void 0 : _a2.call(Directives, part, state);
+          (_a3 = Directives[part.directive]) == null ? void 0 : _a3.call(Directives, part, state);
           continue;
         }
         let value = evaluateExpression(expression, state);
@@ -1770,8 +1963,8 @@ var mediaThemeGerwig = (() => {
     "<=": (a, b) => a <= b,
     "??": (a, b) => a != null ? a : b,
     "|": (a, b) => {
-      var _a2;
-      return (_a2 = pipeModifiers[b]) == null ? void 0 : _a2.call(pipeModifiers, a);
+      var _a3;
+      return (_a3 = pipeModifiers[b]) == null ? void 0 : _a3.call(pipeModifiers, a);
     }
   };
   function tokenizeExpression(expr) {
@@ -1785,12 +1978,12 @@ var mediaThemeGerwig = (() => {
     }).filter(({ type }) => type !== "ws");
   }
   function evaluateExpression(expr, state = {}) {
-    var _a2, _b2, _c, _d, _e, _f, _g;
+    var _a3, _b2, _c, _d, _e, _f, _g;
     const tokens = tokenizeExpression(expr);
     if (tokens.length === 0 || tokens.some(({ type }) => !type)) {
       return invalidExpression(expr);
     }
-    if (((_a2 = tokens[0]) == null ? void 0 : _a2.token) === ">") {
+    if (((_a3 = tokens[0]) == null ? void 0 : _a3.token) === ">") {
       const partial = state[(_b2 = tokens[1]) == null ? void 0 : _b2.token];
       if (!partial) {
         return invalidExpression(expr);
@@ -1859,11 +2052,12 @@ var mediaThemeGerwig = (() => {
     return state[raw];
   }
   function tokenize2(str, parsers) {
-    let len, match, token, tokens = [];
+    let len, match, token;
+    const tokens = [];
     while (str) {
       token = null;
       len = str.length;
-      for (let key in parsers) {
+      for (const key in parsers) {
         match = parsers[key].exec(str);
         if (match && match.index < len) {
           token = {
@@ -1889,12 +2083,6 @@ var mediaThemeGerwig = (() => {
   }
 
   // ../../node_modules/media-chrome/dist/media-theme-element.js
-  var __defProp3 = Object.defineProperty;
-  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __publicField2 = (obj, key, value) => {
-    __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
-    return value;
-  };
   var __accessCheck3 = (obj, member, msg) => {
     if (!member.has(obj))
       throw TypeError("Cannot " + msg);
@@ -1928,13 +2116,16 @@ var mediaThemeGerwig = (() => {
     mediatargetlivewindow: "targetlivewindow",
     mediastreamtype: "streamtype"
   };
-  var prependTemplate = Document.createElement("template");
+  var prependTemplate = Document2.createElement("template");
   prependTemplate.innerHTML = /*html*/
   `
   <style>
     :host {
       display: inline-block;
       line-height: 0;
+
+      /* Hide theme element until the breakpoints are available to avoid flicker. */
+      visibility: hidden;
     }
 
     media-controller {
@@ -1942,10 +2133,13 @@ var mediaThemeGerwig = (() => {
       height: 100%;
     }
 
-    media-controller:not([mediasubtitleslist]) media-captions-selectmenu,
     media-captions-button:not([mediasubtitleslist]),
-    media-rendition-selectmenu[mediarenditionunavailable],
-    media-audio-track-selectmenu[mediaaudiotrackunavailable],
+    media-captions-menu:not([mediasubtitleslist]),
+    media-captions-menu-button:not([mediasubtitleslist]),
+    media-audio-track-menu[mediaaudiotrackunavailable],
+    media-audio-track-menu-button[mediaaudiotrackunavailable],
+    media-rendition-menu[mediarenditionunavailable],
+    media-rendition-menu-button[mediarenditionunavailable],
     media-volume-range[mediavolumeunavailable],
     media-airplay-button[mediaairplayunavailable],
     media-fullscreen-button[mediafullscreenunavailable],
@@ -1960,8 +2154,6 @@ var mediaThemeGerwig = (() => {
       super();
       __privateAdd3(this, _upgradeProperty);
       __privateAdd3(this, _updateTemplate);
-      __publicField2(this, "renderRoot");
-      __publicField2(this, "renderer");
       __privateAdd3(this, _template, void 0);
       __privateAdd3(this, _prevTemplate, void 0);
       __privateAdd3(this, _prevTemplateId, void 0);
@@ -1971,15 +2163,12 @@ var mediaThemeGerwig = (() => {
         this.renderRoot = this.attachShadow({ mode: "open" });
         this.createRenderer();
       }
-      const observer = new MutationObserver((mutationList) => {
-        var _a2;
-        if (this.mediaController && !((_a2 = this.mediaController) == null ? void 0 : _a2.breakpointsComputed))
+      const observer2 = new MutationObserver((mutationList) => {
+        var _a3;
+        if (this.mediaController && !((_a3 = this.mediaController) == null ? void 0 : _a3.breakpointsComputed))
           return;
         if (mutationList.some((mutation) => {
-          const target = (
-            /** @type {HTMLElement} */
-            mutation.target
-          );
+          const target = mutation.target;
           if (target === this)
             return true;
           if (target.localName !== "media-controller")
@@ -1993,8 +2182,8 @@ var mediaThemeGerwig = (() => {
           this.render();
         }
       });
-      observer.observe(this, { attributes: true });
-      observer.observe(this.renderRoot, {
+      observer2.observe(this, { attributes: true });
+      observer2.observe(this.renderRoot, {
         attributes: true,
         subtree: true
       });
@@ -2009,8 +2198,8 @@ var mediaThemeGerwig = (() => {
       return this.renderRoot.querySelector("media-controller");
     }
     get template() {
-      var _a2;
-      return (_a2 = __privateGet3(this, _template)) != null ? _a2 : this.constructor.template;
+      var _a3;
+      return (_a3 = __privateGet3(this, _template)) != null ? _a3 : this.constructor.template;
     }
     set template(element) {
       __privateSet3(this, _prevTemplateId, null);
@@ -2018,9 +2207,9 @@ var mediaThemeGerwig = (() => {
       this.createRenderer();
     }
     get props() {
-      var _a2, _b2, _c;
+      var _a3, _b2, _c;
       const observedAttributes = [
-        ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(
+        ...Array.from((_b2 = (_a3 = this.mediaController) == null ? void 0 : _a3.attributes) != null ? _b2 : []).filter(
           ({ name }) => {
             return observedMediaAttributes[name] || name.startsWith("breakpoint");
           }
@@ -2028,7 +2217,7 @@ var mediaThemeGerwig = (() => {
         ...Array.from(this.attributes)
       ];
       const props = {};
-      for (let attr of observedAttributes) {
+      for (const attr of observedAttributes) {
         const name = (_c = observedMediaAttributes[attr.name]) != null ? _c : camelCase(attr.name);
         let { value } = attr;
         if (value != null) {
@@ -2067,8 +2256,12 @@ var mediaThemeGerwig = (() => {
       }
     }
     render() {
-      var _a2;
-      (_a2 = this.renderer) == null ? void 0 : _a2.update(this.props);
+      var _a3;
+      (_a3 = this.renderer) == null ? void 0 : _a3.update(this.props);
+      const { style } = getOrInsertCSSRule(this.renderRoot, ":host");
+      if (style.visibility === "hidden") {
+        style.removeProperty("visibility");
+      }
     }
   };
   _template = /* @__PURE__ */ new WeakMap();
@@ -2084,34 +2277,30 @@ var mediaThemeGerwig = (() => {
   };
   _updateTemplate = /* @__PURE__ */ new WeakSet();
   updateTemplate_fn = function() {
-    var _a2;
+    var _a3;
     const templateId = this.getAttribute("template");
     if (!templateId || templateId === __privateGet3(this, _prevTemplateId))
       return;
-    const rootNode = (
-      /** @type HTMLDocument | ShadowRoot */
-      this.getRootNode()
-    );
-    const template2 = (_a2 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a2.call(rootNode, templateId);
-    if (template2) {
+    const rootNode = this.getRootNode();
+    const template8 = (_a3 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a3.call(rootNode, templateId);
+    if (template8) {
       __privateSet3(this, _prevTemplateId, templateId);
-      __privateSet3(this, _template, template2);
+      __privateSet3(this, _template, template8);
       this.createRenderer();
       return;
     }
     if (isValidUrl(templateId)) {
       __privateSet3(this, _prevTemplateId, templateId);
       request(templateId).then((data) => {
-        const template22 = Document.createElement("template");
+        const template22 = Document2.createElement("template");
         template22.innerHTML = data;
         __privateSet3(this, _template, template22);
         this.createRenderer();
       }).catch(console.error);
     }
   };
-  __publicField2(MediaThemeElement, "template");
-  __publicField2(MediaThemeElement, "observedAttributes", ["template"]);
-  __publicField2(MediaThemeElement, "processor", processor);
+  MediaThemeElement.observedAttributes = ["template"];
+  MediaThemeElement.processor = processor;
   function isValidUrl(url) {
     if (!/^(\/|\.\/|https?:\/\/)/.test(url))
       return false;
@@ -2136,14 +2325,3121 @@ var mediaThemeGerwig = (() => {
     GlobalThis.customElements.define("media-theme", MediaThemeElement);
   }
 
+  // ../../node_modules/media-chrome/dist/utils/anchor-utils.js
+  function computePosition({
+    anchor,
+    floating,
+    placement
+  }) {
+    const rects = getElementRects({ anchor, floating });
+    const { x, y } = computeCoordsFromPlacement(rects, placement);
+    return { x, y };
+  }
+  function getElementRects({
+    anchor,
+    floating
+  }) {
+    return {
+      anchor: getRectRelativeToOffsetParent(anchor, floating.offsetParent),
+      floating: {
+        x: 0,
+        y: 0,
+        width: floating.offsetWidth,
+        height: floating.offsetHeight
+      }
+    };
+  }
+  function getRectRelativeToOffsetParent(element, offsetParent) {
+    const rect = element.getBoundingClientRect();
+    const offsetRect = offsetParent.getBoundingClientRect();
+    return {
+      x: rect.x - offsetRect.x,
+      y: rect.y - offsetRect.y,
+      width: rect.width,
+      height: rect.height
+    };
+  }
+  function computeCoordsFromPlacement({ anchor, floating }, placement) {
+    const alignmentAxis = getSideAxis(placement) === "x" ? "y" : "x";
+    const alignLength = alignmentAxis === "y" ? "height" : "width";
+    const side = getSide(placement);
+    const commonX = anchor.x + anchor.width / 2 - floating.width / 2;
+    const commonY = anchor.y + anchor.height / 2 - floating.height / 2;
+    const commonAlign = anchor[alignLength] / 2 - floating[alignLength] / 2;
+    let coords;
+    switch (side) {
+      case "top":
+        coords = { x: commonX, y: anchor.y - floating.height };
+        break;
+      case "bottom":
+        coords = { x: commonX, y: anchor.y + anchor.height };
+        break;
+      case "right":
+        coords = { x: anchor.x + anchor.width, y: commonY };
+        break;
+      case "left":
+        coords = { x: anchor.x - floating.width, y: commonY };
+        break;
+      default:
+        coords = { x: anchor.x, y: anchor.y };
+    }
+    switch (placement.split("-")[1]) {
+      case "start":
+        coords[alignmentAxis] -= commonAlign;
+        break;
+      case "end":
+        coords[alignmentAxis] += commonAlign;
+        break;
+    }
+    return coords;
+  }
+  function getSide(placement) {
+    return placement.split("-")[0];
+  }
+  function getSideAxis(placement) {
+    return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
+  }
+
+  // ../../node_modules/media-chrome/dist/utils/resize-observer.js
+  var callbacksMap = /* @__PURE__ */ new WeakMap();
+  var getCallbacks = (element) => {
+    let callbacks = callbacksMap.get(element);
+    if (!callbacks)
+      callbacksMap.set(element, callbacks = /* @__PURE__ */ new Set());
+    return callbacks;
+  };
+  var observer = new GlobalThis.ResizeObserver(
+    (entries) => {
+      for (const entry of entries) {
+        for (const callback of getCallbacks(entry.target)) {
+          callback(entry);
+        }
+      }
+    }
+  );
+  function observeResize(element, callback) {
+    getCallbacks(element).add(callback);
+    observer.observe(element);
+  }
+  function unobserveResize(element, callback) {
+    const callbacks = getCallbacks(element);
+    callbacks.delete(callback);
+    if (!callbacks.size) {
+      observer.unobserve(element);
+    }
+  }
+
+  // ../../node_modules/media-chrome/dist/utils/events.js
+  var InvokeEvent = class extends Event {
+    /**
+     * @param init - The event options.
+     */
+    constructor({ action = "auto", relatedTarget, ...options }) {
+      super("invoke", options);
+      this.action = action;
+      this.relatedTarget = relatedTarget;
+    }
+  };
+  var ToggleEvent = class extends Event {
+    /**
+     * @param init - The event options.
+     */
+    constructor({ newState, oldState, ...options }) {
+      super("toggle", options);
+      this.newState = newState;
+      this.oldState = oldState;
+    }
+  };
+
+  // ../../node_modules/media-chrome/dist/menu/media-chrome-menu.js
+  var __accessCheck4 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet4 = (obj, member, getter) => {
+    __accessCheck4(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd4 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var __privateSet4 = (obj, member, value, setter) => {
+    __accessCheck4(obj, member, "write to private field");
+    setter ? setter.call(obj, value) : member.set(obj, value);
+    return value;
+  };
+  var __privateMethod2 = (obj, member, method) => {
+    __accessCheck4(obj, member, "access private method");
+    return method;
+  };
+  var _mediaController;
+  var _previouslyFocused;
+  var _invokerElement;
+  var _previousItems;
+  var _mutationObserver;
+  var _isPopover;
+  var _handleSlotChange;
+  var handleSlotChange_fn;
+  var _handleMenuItems;
+  var _updateLayoutStyle;
+  var updateLayoutStyle_fn;
+  var _handleInvoke;
+  var handleInvoke_fn;
+  var _handleOpen;
+  var handleOpen_fn;
+  var _handleClosed;
+  var handleClosed_fn;
+  var _handleBoundsResize;
+  var _handleMenuResize;
+  var _positionMenu;
+  var positionMenu_fn;
+  var _resizeMenu;
+  var resizeMenu_fn;
+  var _handleClick;
+  var handleClick_fn;
+  var _backButtonElement;
+  var backButtonElement_get;
+  var _handleToggle;
+  var handleToggle_fn;
+  var _checkSubmenuHasExpanded;
+  var checkSubmenuHasExpanded_fn;
+  var _handleFocusOut;
+  var handleFocusOut_fn;
+  var _handleKeyDown;
+  var handleKeyDown_fn;
+  var _getItem;
+  var getItem_fn;
+  var _getTabItem;
+  var getTabItem_fn;
+  var _setTabItem;
+  var setTabItem_fn;
+  var _selectItem;
+  var selectItem_fn;
+  function createMenuItem({
+    type,
+    text,
+    value,
+    checked
+  }) {
+    const item = Document2.createElement(
+      "media-chrome-menu-item"
+    );
+    item.type = type != null ? type : "";
+    item.part.add("menu-item");
+    if (type)
+      item.part.add(type);
+    item.value = value;
+    item.checked = checked;
+    const label = Document2.createElement("span");
+    label.textContent = text;
+    item.append(label);
+    return item;
+  }
+  function createIndicator(el, name) {
+    let customIndicator = el.querySelector(`:scope > [slot="${name}"]`);
+    if ((customIndicator == null ? void 0 : customIndicator.nodeName) == "SLOT")
+      customIndicator = customIndicator.assignedElements({ flatten: true })[0];
+    if (customIndicator) {
+      customIndicator = customIndicator.cloneNode(true);
+      return customIndicator;
+    }
+    const fallbackIndicator = el.shadowRoot.querySelector(
+      `[name="${name}"] > svg`
+    );
+    if (fallbackIndicator) {
+      return fallbackIndicator.cloneNode(true);
+    }
+    return "";
+  }
+  var template = Document2.createElement("template");
+  template.innerHTML = /*html*/
+  `
+  <style>
+    :host {
+      font: var(--media-font,
+        var(--media-font-weight, normal)
+        var(--media-font-size, 14px) /
+        var(--media-text-content-height, var(--media-control-height, 24px))
+        var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
+      color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
+      background: var(--media-menu-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .8))));
+      border-radius: var(--media-menu-border-radius);
+      border: var(--media-menu-border, none);
+      display: var(--media-menu-display, inline-flex);
+      transition: var(--media-menu-transition-in,
+        visibility 0s,
+        opacity .2s ease-out,
+        transform .15s ease-out,
+        left .2s ease-in-out,
+        min-width .2s ease-in-out,
+        min-height .2s ease-in-out
+      ) !important;
+      ${/* ^^Prevent transition override by media-container */
+  ""}
+      visibility: var(--media-menu-visibility, visible);
+      opacity: var(--media-menu-opacity, 1);
+      max-height: var(--media-menu-max-height, var(--_menu-max-height, 300px));
+      transform: var(--media-menu-transform-in, translateY(0) scale(1));
+      flex-direction: column;
+      ${/* Prevent overflowing a flex container */
+  ""}
+      min-height: 0;
+      position: relative;
+      box-sizing: border-box;
+    }
+
+    :host([hidden]) {
+      transition: var(--media-menu-transition-out,
+        visibility .15s ease-in,
+        opacity .15s ease-in,
+        transform .15s ease-in
+      ) !important;
+      visibility: var(--media-menu-hidden-visibility, hidden);
+      opacity: var(--media-menu-hidden-opacity, 0);
+      max-height: var(--media-menu-hidden-max-height,
+        var(--media-menu-max-height, var(--_menu-max-height, 300px)));
+      transform: var(--media-menu-transform-out, translateY(2px) scale(.99));
+      pointer-events: none;
+    }
+
+    :host([slot="submenu"]) {
+      background: none;
+      width: 100%;
+      min-height: 100%;
+      position: absolute;
+      bottom: 0;
+      right: -100%;
+    }
+
+    #container {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      transition: transform .2s ease-out;
+      transform: translate(0, 0);
+    }
+
+    #container.has-expanded {
+      transition: transform .2s ease-in;
+      transform: translate(-100%, 0);
+    }
+
+    slot[name="header"] {
+      display: flex;
+      padding: .4em .7em;
+      border-bottom: 1px solid rgb(255 255 255 / .25);
+      cursor: default;
+    }
+
+    slot[name="header"][hidden] {
+      display: none;
+    }
+
+    button[part~="back"] {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      cursor: pointer;
+      outline: inherit;
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    svg[part~="back"] {
+      height: var(--media-menu-icon-height, var(--media-control-height, 24px));
+      fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238)));
+      display: block;
+      margin-right: .5ch;
+    }
+
+    slot:not([name]) {
+      gap: var(--media-menu-gap);
+      flex-direction: var(--media-menu-flex-direction, column);
+      overflow: var(--media-menu-overflow, hidden auto);
+      display: flex;
+      min-height: 0;
+    }
+
+    :host([role="menu"]) slot:not([name]) {
+      padding-block: .4em;
+    }
+
+    slot:not([name])::slotted([role="menu"]) {
+      background: none;
+    }
+
+    media-chrome-menu-item > span {
+      margin-right: .5ch;
+      max-width: var(--media-menu-item-max-width);
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  </style>
+  <style id="layout-row" media="width:0">
+
+    slot[name="header"] {
+      padding: .4em .5em;
+    }
+
+    slot:not([name]) {
+      gap: var(--media-menu-gap, .25em);
+      flex-direction: var(--media-menu-flex-direction, row);
+      padding-inline: .5em;
+    }
+
+    media-chrome-menu-item {
+      padding: .3em .5em;
+    }
+
+    media-chrome-menu-item[aria-checked="true"] {
+      background: var(--media-menu-item-checked-background, rgb(255 255 255 / .2));
+    }
+
+    ${/* In row layout hide the checked indicator completely. */
+  ""}
+    media-chrome-menu-item::part(checked-indicator) {
+      display: var(--media-menu-item-checked-indicator-display, none);
+    }
+  </style>
+  <div id="container">
+    <slot name="header" hidden>
+      <button part="back button" aria-label="Back to previous menu">
+        <slot name="back-icon">
+          <svg aria-hidden="true" viewBox="0 0 20 24" part="back indicator">
+            <path d="m11.88 17.585.742-.669-4.2-4.665 4.2-4.666-.743-.669-4.803 5.335 4.803 5.334Z"/>
+          </svg>
+        </slot>
+        <slot name="title"></slot>
+      </button>
+    </slot>
+    <slot></slot>
+  </div>
+  <slot name="checked-indicator" hidden></slot>
+`;
+  var Attributes = {
+    STYLE: "style",
+    HIDDEN: "hidden",
+    DISABLED: "disabled",
+    ANCHOR: "anchor"
+  };
+  var MediaChromeMenu = class extends GlobalThis.HTMLElement {
+    constructor() {
+      super();
+      __privateAdd4(this, _handleSlotChange);
+      __privateAdd4(this, _updateLayoutStyle);
+      __privateAdd4(this, _handleInvoke);
+      __privateAdd4(this, _handleOpen);
+      __privateAdd4(this, _handleClosed);
+      __privateAdd4(this, _positionMenu);
+      __privateAdd4(this, _resizeMenu);
+      __privateAdd4(this, _handleClick);
+      __privateAdd4(this, _backButtonElement);
+      __privateAdd4(this, _handleToggle);
+      __privateAdd4(this, _checkSubmenuHasExpanded);
+      __privateAdd4(this, _handleFocusOut);
+      __privateAdd4(this, _handleKeyDown);
+      __privateAdd4(this, _getItem);
+      __privateAdd4(this, _getTabItem);
+      __privateAdd4(this, _setTabItem);
+      __privateAdd4(this, _selectItem);
+      __privateAdd4(this, _mediaController, null);
+      __privateAdd4(this, _previouslyFocused, null);
+      __privateAdd4(this, _invokerElement, null);
+      __privateAdd4(this, _previousItems, /* @__PURE__ */ new Set());
+      __privateAdd4(this, _mutationObserver, void 0);
+      __privateAdd4(this, _isPopover, false);
+      __privateAdd4(this, _handleMenuItems, () => {
+        const previousItems = __privateGet4(this, _previousItems);
+        const currentItems = new Set(this.items);
+        for (const item of previousItems) {
+          if (!currentItems.has(item)) {
+            this.dispatchEvent(new CustomEvent("removemenuitem", { detail: item }));
+          }
+        }
+        for (const item of currentItems) {
+          if (!previousItems.has(item)) {
+            this.dispatchEvent(new CustomEvent("addmenuitem", { detail: item }));
+          }
+        }
+        __privateSet4(this, _previousItems, currentItems);
+      });
+      __privateAdd4(this, _handleBoundsResize, () => {
+        __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, false);
+        __privateMethod2(this, _resizeMenu, resizeMenu_fn).call(this, false);
+      });
+      __privateAdd4(this, _handleMenuResize, () => {
+        __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, false);
+      });
+      if (!this.shadowRoot) {
+        this.attachShadow({ mode: "open" });
+        this.nativeEl = this.constructor.template.content.cloneNode(true);
+        this.shadowRoot.append(this.nativeEl);
+      }
+      this.container = this.shadowRoot.querySelector("#container");
+      this.defaultSlot = this.shadowRoot.querySelector(
+        "slot:not([name])"
+      );
+      this.shadowRoot.addEventListener("slotchange", this);
+      __privateSet4(this, _mutationObserver, new MutationObserver(__privateGet4(this, _handleMenuItems)));
+      __privateGet4(this, _mutationObserver).observe(this.defaultSlot, { childList: true });
+    }
+    static get observedAttributes() {
+      return [
+        Attributes.DISABLED,
+        Attributes.HIDDEN,
+        Attributes.STYLE,
+        Attributes.ANCHOR,
+        MediaStateReceiverAttributes.MEDIA_CONTROLLER
+      ];
+    }
+    static formatMenuItemText(text) {
+      return text;
+    }
+    enable() {
+      this.addEventListener("click", this);
+      this.addEventListener("focusout", this);
+      this.addEventListener("keydown", this);
+      this.addEventListener("invoke", this);
+      this.addEventListener("toggle", this);
+    }
+    disable() {
+      this.removeEventListener("click", this);
+      this.removeEventListener("focusout", this);
+      this.removeEventListener("keyup", this);
+      this.removeEventListener("invoke", this);
+      this.removeEventListener("toggle", this);
+    }
+    handleEvent(event) {
+      switch (event.type) {
+        case "slotchange":
+          __privateMethod2(this, _handleSlotChange, handleSlotChange_fn).call(this, event);
+          break;
+        case "invoke":
+          __privateMethod2(this, _handleInvoke, handleInvoke_fn).call(this, event);
+          break;
+        case "click":
+          __privateMethod2(this, _handleClick, handleClick_fn).call(this, event);
+          break;
+        case "toggle":
+          __privateMethod2(this, _handleToggle, handleToggle_fn).call(this, event);
+          break;
+        case "focusout":
+          __privateMethod2(this, _handleFocusOut, handleFocusOut_fn).call(this, event);
+          break;
+        case "keydown":
+          __privateMethod2(this, _handleKeyDown, handleKeyDown_fn).call(this, event);
+          break;
+      }
+    }
+    connectedCallback() {
+      var _a3, _b2;
+      __privateMethod2(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
+      if (!this.hasAttribute("disabled")) {
+        this.enable();
+      }
+      if (!this.role) {
+        this.role = "menu";
+      }
+      __privateSet4(this, _mediaController, getAttributeMediaController(this));
+      (_b2 = (_a3 = __privateGet4(this, _mediaController)) == null ? void 0 : _a3.associateElement) == null ? void 0 : _b2.call(_a3, this);
+      if (!this.hidden) {
+        observeResize(getBoundsElement(this), __privateGet4(this, _handleBoundsResize));
+        observeResize(this, __privateGet4(this, _handleMenuResize));
+      }
+    }
+    disconnectedCallback() {
+      var _a3, _b2;
+      unobserveResize(getBoundsElement(this), __privateGet4(this, _handleBoundsResize));
+      unobserveResize(this, __privateGet4(this, _handleMenuResize));
+      this.disable();
+      (_b2 = (_a3 = __privateGet4(this, _mediaController)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      __privateSet4(this, _mediaController, null);
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      var _a3, _b2, _c, _d;
+      if (attrName === Attributes.HIDDEN && newValue !== oldValue) {
+        if (!__privateGet4(this, _isPopover))
+          __privateSet4(this, _isPopover, true);
+        if (this.hidden) {
+          __privateMethod2(this, _handleClosed, handleClosed_fn).call(this);
+        } else {
+          __privateMethod2(this, _handleOpen, handleOpen_fn).call(this);
+        }
+        this.dispatchEvent(
+          new ToggleEvent({
+            oldState: this.hidden ? "open" : "closed",
+            newState: this.hidden ? "closed" : "open",
+            bubbles: true
+          })
+        );
+      } else if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
+        if (oldValue) {
+          (_b2 = (_a3 = __privateGet4(this, _mediaController)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          __privateSet4(this, _mediaController, null);
+        }
+        if (newValue && this.isConnected) {
+          __privateSet4(this, _mediaController, getAttributeMediaController(this));
+          (_d = (_c = __privateGet4(this, _mediaController)) == null ? void 0 : _c.associateElement) == null ? void 0 : _d.call(_c, this);
+        }
+      } else if (attrName === Attributes.DISABLED && newValue !== oldValue) {
+        if (newValue == null) {
+          this.enable();
+        } else {
+          this.disable();
+        }
+      } else if (attrName === Attributes.STYLE && newValue !== oldValue) {
+        __privateMethod2(this, _updateLayoutStyle, updateLayoutStyle_fn).call(this);
+      }
+    }
+    formatMenuItemText(text, data) {
+      return this.constructor.formatMenuItemText(text, data);
+    }
+    get anchor() {
+      return this.getAttribute("anchor");
+    }
+    set anchor(value) {
+      this.setAttribute("anchor", `${value}`);
+    }
+    /**
+     * Returns the anchor element when it is a floating menu.
+     */
+    get anchorElement() {
+      var _a3;
+      if (this.anchor) {
+        return (_a3 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a3.querySelector(`#${this.anchor}`);
+      }
+      return null;
+    }
+    /**
+     * Returns the menu items.
+     */
+    get items() {
+      return this.defaultSlot.assignedElements({ flatten: true }).filter(isMenuItem);
+    }
+    get radioGroupItems() {
+      return this.items.filter((item) => item.role === "menuitemradio");
+    }
+    get checkedItems() {
+      return this.items.filter((item) => item.checked);
+    }
+    get value() {
+      var _a3, _b2;
+      return (_b2 = (_a3 = this.checkedItems[0]) == null ? void 0 : _a3.value) != null ? _b2 : "";
+    }
+    set value(newValue) {
+      const item = this.items.find((item2) => item2.value === newValue);
+      if (!item)
+        return;
+      __privateMethod2(this, _selectItem, selectItem_fn).call(this, item);
+    }
+    focus() {
+      __privateSet4(this, _previouslyFocused, getActiveElement());
+      if (this.items.length) {
+        __privateMethod2(this, _setTabItem, setTabItem_fn).call(this, this.items[0]);
+        this.items[0].focus();
+        return;
+      }
+      const focusable = this.querySelector(
+        '[autofocus], [tabindex]:not([tabindex="-1"]), [role="menu"]'
+      );
+      focusable == null ? void 0 : focusable.focus();
+    }
+    handleSelect(event) {
+      var _a3;
+      const item = __privateMethod2(this, _getItem, getItem_fn).call(this, event);
+      if (!item)
+        return;
+      __privateMethod2(this, _selectItem, selectItem_fn).call(this, item, item.type === "checkbox");
+      if (__privateGet4(this, _invokerElement) && !this.hidden) {
+        (_a3 = __privateGet4(this, _previouslyFocused)) == null ? void 0 : _a3.focus();
+        this.hidden = true;
+      }
+    }
+    get keysUsed() {
+      return [
+        "Enter",
+        "Escape",
+        "Tab",
+        " ",
+        "ArrowDown",
+        "ArrowUp",
+        "Home",
+        "End"
+      ];
+    }
+    handleMove(event) {
+      var _a3, _b2;
+      const { key } = event;
+      const items = this.items;
+      const currentItem = (_b2 = (_a3 = __privateMethod2(this, _getItem, getItem_fn).call(this, event)) != null ? _a3 : __privateMethod2(this, _getTabItem, getTabItem_fn).call(this)) != null ? _b2 : items[0];
+      const currentIndex = items.indexOf(currentItem);
+      let index = Math.max(0, currentIndex);
+      if (key === "ArrowDown") {
+        index++;
+      } else if (key === "ArrowUp") {
+        index--;
+      } else if (event.key === "Home") {
+        index = 0;
+      } else if (event.key === "End") {
+        index = items.length - 1;
+      }
+      if (index < 0) {
+        index = items.length - 1;
+      }
+      if (index > items.length - 1) {
+        index = 0;
+      }
+      __privateMethod2(this, _setTabItem, setTabItem_fn).call(this, items[index]);
+      items[index].focus();
+    }
+  };
+  _mediaController = /* @__PURE__ */ new WeakMap();
+  _previouslyFocused = /* @__PURE__ */ new WeakMap();
+  _invokerElement = /* @__PURE__ */ new WeakMap();
+  _previousItems = /* @__PURE__ */ new WeakMap();
+  _mutationObserver = /* @__PURE__ */ new WeakMap();
+  _isPopover = /* @__PURE__ */ new WeakMap();
+  _handleSlotChange = /* @__PURE__ */ new WeakSet();
+  handleSlotChange_fn = function(event) {
+    const slot = event.target;
+    for (const node of slot.assignedNodes({ flatten: true })) {
+      if (node.nodeType === 3 && node.textContent.trim() === "") {
+        node.remove();
+      }
+    }
+    if (["header", "title"].includes(slot.name)) {
+      const header = this.shadowRoot.querySelector(
+        'slot[name="header"]'
+      );
+      header.hidden = slot.assignedNodes().length === 0;
+    }
+    if (!slot.name) {
+      __privateGet4(this, _handleMenuItems).call(this);
+    }
+  };
+  _handleMenuItems = /* @__PURE__ */ new WeakMap();
+  _updateLayoutStyle = /* @__PURE__ */ new WeakSet();
+  updateLayoutStyle_fn = function() {
+    var _a3;
+    const layoutRowStyle = this.shadowRoot.querySelector("#layout-row");
+    const menuLayout = (_a3 = getComputedStyle(this).getPropertyValue("--media-menu-layout")) == null ? void 0 : _a3.trim();
+    layoutRowStyle.setAttribute("media", menuLayout === "row" ? "" : "width:0");
+  };
+  _handleInvoke = /* @__PURE__ */ new WeakSet();
+  handleInvoke_fn = function(event) {
+    __privateSet4(this, _invokerElement, event.relatedTarget);
+    if (!containsComposedNode(this, event.relatedTarget)) {
+      this.hidden = !this.hidden;
+    }
+  };
+  _handleOpen = /* @__PURE__ */ new WeakSet();
+  handleOpen_fn = function() {
+    var _a3;
+    (_a3 = __privateGet4(this, _invokerElement)) == null ? void 0 : _a3.setAttribute("aria-expanded", "true");
+    requestAnimationFrame(() => __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, false));
+    this.addEventListener("transitionend", () => this.focus(), { once: true });
+    observeResize(getBoundsElement(this), __privateGet4(this, _handleBoundsResize));
+    observeResize(this, __privateGet4(this, _handleMenuResize));
+  };
+  _handleClosed = /* @__PURE__ */ new WeakSet();
+  handleClosed_fn = function() {
+    var _a3;
+    (_a3 = __privateGet4(this, _invokerElement)) == null ? void 0 : _a3.setAttribute("aria-expanded", "false");
+    unobserveResize(getBoundsElement(this), __privateGet4(this, _handleBoundsResize));
+    unobserveResize(this, __privateGet4(this, _handleMenuResize));
+  };
+  _handleBoundsResize = /* @__PURE__ */ new WeakMap();
+  _handleMenuResize = /* @__PURE__ */ new WeakMap();
+  _positionMenu = /* @__PURE__ */ new WeakSet();
+  positionMenu_fn = function(animate, menuWidth) {
+    if (this.hasAttribute("mediacontroller") && !this.anchor)
+      return;
+    if (this.hidden || !this.anchorElement)
+      return;
+    const { x, y } = computePosition({
+      anchor: this.anchorElement,
+      floating: this,
+      placement: "top-start"
+    });
+    menuWidth != null ? menuWidth : menuWidth = this.offsetWidth;
+    const bounds = getBoundsElement(this);
+    const boundsRect = bounds.getBoundingClientRect();
+    const anchorRect = this.anchorElement.getBoundingClientRect();
+    const right = boundsRect.width - x - menuWidth;
+    const bottom = boundsRect.height - y - this.offsetHeight;
+    const maxHeight = boundsRect.height - anchorRect.height;
+    const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
+    if (!animate) {
+      style.setProperty("--media-menu-transition-in", "none");
+    }
+    style.setProperty("position", "absolute");
+    style.setProperty("right", `${Math.max(0, right)}px`);
+    style.setProperty("bottom", `${bottom}px`);
+    style.setProperty("--_menu-max-height", `${maxHeight}px`);
+    style.removeProperty("--media-menu-transition-in");
+  };
+  _resizeMenu = /* @__PURE__ */ new WeakSet();
+  resizeMenu_fn = function(animate) {
+    const expandedMenuItem = this.querySelector(
+      '[role="menuitem"][aria-haspopup][aria-expanded="true"]'
+    );
+    const expandedSubmenu = expandedMenuItem == null ? void 0 : expandedMenuItem.querySelector(
+      '[role="menu"]'
+    );
+    const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
+    if (!animate) {
+      style.setProperty("--media-menu-transition-in", "none");
+    }
+    if (expandedSubmenu) {
+      const height = expandedSubmenu.offsetHeight;
+      const width = Math.max(
+        expandedSubmenu.offsetWidth,
+        expandedMenuItem.offsetWidth
+      );
+      this.style.setProperty("min-width", `${width}px`);
+      this.style.setProperty("min-height", `${height}px`);
+      __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, animate, width);
+    } else {
+      this.style.removeProperty("min-width");
+      this.style.removeProperty("min-height");
+      __privateMethod2(this, _positionMenu, positionMenu_fn).call(this, animate);
+    }
+    style.removeProperty("--media-menu-transition-in");
+  };
+  _handleClick = /* @__PURE__ */ new WeakSet();
+  handleClick_fn = function(event) {
+    var _a3;
+    event.stopPropagation();
+    if (event.composedPath().includes(__privateGet4(this, _backButtonElement, backButtonElement_get))) {
+      (_a3 = __privateGet4(this, _previouslyFocused)) == null ? void 0 : _a3.focus();
+      this.hidden = true;
+      return;
+    }
+    const item = __privateMethod2(this, _getItem, getItem_fn).call(this, event);
+    if (!item || item.hasAttribute("disabled"))
+      return;
+    __privateMethod2(this, _setTabItem, setTabItem_fn).call(this, item);
+    this.handleSelect(event);
+  };
+  _backButtonElement = /* @__PURE__ */ new WeakSet();
+  backButtonElement_get = function() {
+    var _a3;
+    const headerSlot = this.shadowRoot.querySelector(
+      'slot[name="header"]'
+    );
+    return (_a3 = headerSlot.assignedElements({ flatten: true })) == null ? void 0 : _a3.find(
+      (el) => el.part.contains("back") && el.part.contains("button")
+    );
+  };
+  _handleToggle = /* @__PURE__ */ new WeakSet();
+  handleToggle_fn = function(event) {
+    if (event.target === this)
+      return;
+    __privateMethod2(this, _checkSubmenuHasExpanded, checkSubmenuHasExpanded_fn).call(this);
+    const menuItemsWithSubmenu = Array.from(
+      this.querySelectorAll('[role="menuitem"][aria-haspopup]')
+    );
+    for (const item of menuItemsWithSubmenu) {
+      if (item.invokeTargetElement == event.target)
+        continue;
+      if (event.newState == "open" && item.getAttribute("aria-expanded") == "true" && !item.invokeTargetElement.hidden) {
+        item.invokeTargetElement.dispatchEvent(
+          new InvokeEvent({ relatedTarget: item })
+        );
+      }
+    }
+    for (const item of menuItemsWithSubmenu) {
+      item.setAttribute("aria-expanded", `${!item.submenuElement.hidden}`);
+    }
+    __privateMethod2(this, _resizeMenu, resizeMenu_fn).call(this, true);
+  };
+  _checkSubmenuHasExpanded = /* @__PURE__ */ new WeakSet();
+  checkSubmenuHasExpanded_fn = function() {
+    const selector = '[role="menuitem"] > [role="menu"]:not([hidden])';
+    const expandedMenuItem = this.querySelector(selector);
+    this.container.classList.toggle("has-expanded", !!expandedMenuItem);
+  };
+  _handleFocusOut = /* @__PURE__ */ new WeakSet();
+  handleFocusOut_fn = function(event) {
+    var _a3;
+    if (!containsComposedNode(this, event.relatedTarget)) {
+      if (__privateGet4(this, _isPopover)) {
+        (_a3 = __privateGet4(this, _previouslyFocused)) == null ? void 0 : _a3.focus();
+      }
+      if (__privateGet4(this, _invokerElement) && __privateGet4(this, _invokerElement) !== event.relatedTarget && !this.hidden) {
+        this.hidden = true;
+      }
+    }
+  };
+  _handleKeyDown = /* @__PURE__ */ new WeakSet();
+  handleKeyDown_fn = function(event) {
+    var _a3, _b2, _c, _d, _e;
+    const { key, ctrlKey, altKey, metaKey } = event;
+    if (ctrlKey || altKey || metaKey) {
+      return;
+    }
+    if (!this.keysUsed.includes(key)) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (key === "Tab") {
+      if (__privateGet4(this, _isPopover)) {
+        this.hidden = true;
+        return;
+      }
+      if (event.shiftKey) {
+        (_b2 = (_a3 = this.previousElementSibling) == null ? void 0 : _a3.focus) == null ? void 0 : _b2.call(_a3);
+      } else {
+        (_d = (_c = this.nextElementSibling) == null ? void 0 : _c.focus) == null ? void 0 : _d.call(_c);
+      }
+      this.blur();
+    } else if (key === "Escape") {
+      (_e = __privateGet4(this, _previouslyFocused)) == null ? void 0 : _e.focus();
+      if (__privateGet4(this, _isPopover)) {
+        this.hidden = true;
+      }
+    } else if (key === "Enter" || key === " ") {
+      this.handleSelect(event);
+    } else {
+      this.handleMove(event);
+    }
+  };
+  _getItem = /* @__PURE__ */ new WeakSet();
+  getItem_fn = function(event) {
+    return event.composedPath().find((el) => {
+      return ["menuitemradio", "menuitemcheckbox"].includes(
+        el.role
+      );
+    });
+  };
+  _getTabItem = /* @__PURE__ */ new WeakSet();
+  getTabItem_fn = function() {
+    return this.items.find((item) => item.tabIndex === 0);
+  };
+  _setTabItem = /* @__PURE__ */ new WeakSet();
+  setTabItem_fn = function(tabItem) {
+    for (const item of this.items) {
+      item.tabIndex = item === tabItem ? 0 : -1;
+    }
+  };
+  _selectItem = /* @__PURE__ */ new WeakSet();
+  selectItem_fn = function(item, toggle) {
+    const oldCheckedItems = [...this.checkedItems];
+    if (item.type === "radio") {
+      this.radioGroupItems.forEach((el) => el.checked = false);
+    }
+    if (toggle) {
+      item.checked = !item.checked;
+    } else {
+      item.checked = true;
+    }
+    if (this.checkedItems.some((opt, i) => opt != oldCheckedItems[i])) {
+      this.dispatchEvent(
+        new Event("change", { bubbles: true, composed: true })
+      );
+    }
+  };
+  MediaChromeMenu.template = template;
+  function isMenuItem(element) {
+    return ["menuitem", "menuitemradio", "menuitemcheckbox"].includes(
+      element == null ? void 0 : element.role
+    );
+  }
+  function getBoundsElement(host) {
+    var _a3;
+    return (_a3 = host.getAttribute("bounds") ? closestComposedNode(host, `#${host.getAttribute("bounds")}`) : getMediaController(host) || host.parentElement) != null ? _a3 : host;
+  }
+  if (!GlobalThis.customElements.get("media-chrome-menu")) {
+    GlobalThis.customElements.define("media-chrome-menu", MediaChromeMenu);
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-chrome-menu-item.js
+  var __accessCheck5 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet5 = (obj, member, getter) => {
+    __accessCheck5(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd5 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var __privateSet5 = (obj, member, value, setter) => {
+    __accessCheck5(obj, member, "write to private field");
+    setter ? setter.call(obj, value) : member.set(obj, value);
+    return value;
+  };
+  var __privateMethod3 = (obj, member, method) => {
+    __accessCheck5(obj, member, "access private method");
+    return method;
+  };
+  var _dirty;
+  var _ownerElement;
+  var _handleSlotChange2;
+  var handleSlotChange_fn2;
+  var _submenuConnected;
+  var submenuConnected_fn;
+  var _submenuDisconnected;
+  var submenuDisconnected_fn;
+  var _handleMenuItem;
+  var _handleKeyUp;
+  var handleKeyUp_fn;
+  var _handleKeyDown2;
+  var handleKeyDown_fn2;
+  var _reset;
+  var reset_fn;
+  var template2 = Document2.createElement("template");
+  template2.innerHTML = /*html*/
+  `
+  <style>
+    :host {
+      transition: var(--media-menu-item-transition,
+        background .15s linear,
+        opacity .2s ease-in-out
+      );
+      outline: var(--media-menu-item-outline, 0);
+      outline-offset: var(--media-menu-item-outline-offset, -1px);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+      justify-self: stretch;
+      white-space: nowrap;
+      white-space-collapse: collapse;
+      text-wrap: nowrap;
+      padding: .4em .8em .4em 1em;
+    }
+
+    :host(:focus-visible) {
+      box-shadow: var(--media-menu-item-focus-shadow, inset 0 0 0 2px rgb(27 127 204 / .9));
+      outline: var(--media-menu-item-hover-outline, 0);
+      outline-offset: var(--media-menu-item-hover-outline-offset,  var(--media-menu-item-outline-offset, -1px));
+    }
+
+    :host(:hover) {
+      cursor: pointer;
+      background: var(--media-menu-item-hover-background, rgb(92 92 102 / .5));
+      outline: var(--media-menu-item-hover-outline);
+      outline-offset: var(--media-menu-item-hover-outline-offset,  var(--media-menu-item-outline-offset, -1px));
+    }
+
+    :host([aria-checked="true"]) {
+      background: var(--media-menu-item-checked-background);
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      color: rgba(255, 255, 255, .3);
+    }
+
+    slot:not([name]) {
+      width: 100%;
+    }
+
+    slot:not([name="submenu"]) {
+      display: inline-flex;
+      align-items: center;
+      transition: inherit;
+      opacity: var(--media-menu-item-opacity, 1);
+    }
+
+    slot[name="description"] {
+      justify-content: end;
+    }
+
+    slot[name="description"] > span {
+      display: inline-block;
+      margin-inline: 1em .2em;
+      max-width: var(--media-menu-item-description-max-width, 100px);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: .8em;
+      font-weight: 400;
+      text-align: right;
+      position: relative;
+      top: .04em;
+    }
+
+    slot[name="checked-indicator"] {
+      display: none;
+    }
+
+    :host(:is([role="menuitemradio"],[role="menuitemcheckbox"])) slot[name="checked-indicator"] {
+      display: var(--media-menu-item-checked-indicator-display, inline-block);
+    }
+
+    ${/* For all slotted icons in prefix and suffix. */
+  ""}
+    svg, img, ::slotted(svg), ::slotted(img) {
+      height: var(--media-menu-item-icon-height, var(--media-control-height, 24px));
+      fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238)));
+      display: block;
+    }
+
+    ${/* Only for indicator icons like checked-indicator or captions-indicator. */
+  ""}
+    [part~="indicator"],
+    ::slotted([part~="indicator"]) {
+      fill: var(--media-menu-item-indicator-fill,
+        var(--media-icon-color, var(--media-primary-color, rgb(238 238 238))));
+      height: var(--media-menu-item-indicator-height, 1.25em);
+      margin-right: .5ch;
+    }
+
+    [part~="checked-indicator"] {
+      visibility: hidden;
+    }
+
+    :host([aria-checked="true"]) [part~="checked-indicator"] {
+      visibility: visible;
+    }
+  </style>
+  <slot name="checked-indicator">
+    <svg aria-hidden="true" viewBox="0 1 24 24" part="checked-indicator indicator">
+      <path d="m10 15.17 9.193-9.191 1.414 1.414-10.606 10.606-6.364-6.364 1.414-1.414 4.95 4.95Z"/>
+    </svg>
+  </slot>
+  <slot name="prefix"></slot>
+  <slot></slot>
+  <slot name="description"></slot>
+  <slot name="suffix"></slot>
+  <slot name="submenu"></slot>
+`;
+  var Attributes2 = {
+    TYPE: "type",
+    VALUE: "value",
+    CHECKED: "checked",
+    DISABLED: "disabled"
+  };
+  var MediaChromeMenuItem = class extends GlobalThis.HTMLElement {
+    constructor() {
+      super();
+      __privateAdd5(this, _handleSlotChange2);
+      __privateAdd5(this, _submenuConnected);
+      __privateAdd5(this, _submenuDisconnected);
+      __privateAdd5(this, _handleKeyUp);
+      __privateAdd5(this, _handleKeyDown2);
+      __privateAdd5(this, _reset);
+      __privateAdd5(this, _dirty, false);
+      __privateAdd5(this, _ownerElement, void 0);
+      __privateAdd5(this, _handleMenuItem, () => {
+        var _a3, _b2;
+        this.setAttribute("submenusize", `${this.submenuElement.items.length}`);
+        const descriptionSlot = this.shadowRoot.querySelector(
+          'slot[name="description"]'
+        );
+        const checkedItem = (_a3 = this.submenuElement.checkedItems) == null ? void 0 : _a3[0];
+        const description = (_b2 = checkedItem == null ? void 0 : checkedItem.dataset.description) != null ? _b2 : checkedItem == null ? void 0 : checkedItem.text;
+        const span = Document2.createElement("span");
+        span.textContent = description != null ? description : "";
+        descriptionSlot.replaceChildren(span);
+      });
+      if (!this.shadowRoot) {
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.append(this.constructor.template.content.cloneNode(true));
+      }
+      this.shadowRoot.addEventListener("slotchange", this);
+    }
+    static get observedAttributes() {
+      return [
+        Attributes2.TYPE,
+        Attributes2.DISABLED,
+        Attributes2.CHECKED,
+        Attributes2.VALUE
+      ];
+    }
+    enable() {
+      if (!this.hasAttribute("tabindex")) {
+        this.setAttribute("tabindex", "-1");
+      }
+      if (isCheckable(this) && !this.hasAttribute("aria-checked")) {
+        this.setAttribute("aria-checked", "false");
+      }
+      this.addEventListener("click", this);
+      this.addEventListener("keydown", this);
+    }
+    disable() {
+      this.removeAttribute("tabindex");
+      this.removeEventListener("click", this);
+      this.removeEventListener("keydown", this);
+      this.removeEventListener("keyup", this);
+    }
+    handleEvent(event) {
+      switch (event.type) {
+        case "slotchange":
+          __privateMethod3(this, _handleSlotChange2, handleSlotChange_fn2).call(this, event);
+          break;
+        case "click":
+          this.handleClick(event);
+          break;
+        case "keydown":
+          __privateMethod3(this, _handleKeyDown2, handleKeyDown_fn2).call(this, event);
+          break;
+        case "keyup":
+          __privateMethod3(this, _handleKeyUp, handleKeyUp_fn).call(this, event);
+          break;
+      }
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      if (attrName === Attributes2.CHECKED && isCheckable(this) && !__privateGet5(this, _dirty)) {
+        this.setAttribute("aria-checked", newValue != null ? "true" : "false");
+      } else if (attrName === Attributes2.TYPE && newValue !== oldValue) {
+        this.role = "menuitem" + newValue;
+      } else if (attrName === Attributes2.DISABLED && newValue !== oldValue) {
+        if (newValue == null) {
+          this.enable();
+        } else {
+          this.disable();
+        }
+      }
+    }
+    connectedCallback() {
+      if (!this.hasAttribute(Attributes2.DISABLED)) {
+        this.enable();
+      }
+      this.role = "menuitem" + this.type;
+      __privateSet5(this, _ownerElement, closestMenuItemsContainer(this, this.parentNode));
+      __privateMethod3(this, _reset, reset_fn).call(this);
+    }
+    disconnectedCallback() {
+      this.disable();
+      __privateMethod3(this, _reset, reset_fn).call(this);
+      __privateSet5(this, _ownerElement, null);
+    }
+    get invokeTarget() {
+      return this.getAttribute("invoketarget");
+    }
+    set invokeTarget(value) {
+      this.setAttribute("invoketarget", `${value}`);
+    }
+    /**
+     * Returns the element with the id specified by the `invoketarget` attribute
+     * or the slotted submenu element.
+     */
+    get invokeTargetElement() {
+      var _a3;
+      if (this.invokeTarget) {
+        return (_a3 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a3.querySelector(
+          `#${this.invokeTarget}`
+        );
+      }
+      return this.submenuElement;
+    }
+    /**
+     * Returns the slotted submenu element.
+     */
+    get submenuElement() {
+      const submenuSlot = this.shadowRoot.querySelector(
+        'slot[name="submenu"]'
+      );
+      return submenuSlot.assignedElements({
+        flatten: true
+      })[0];
+    }
+    get type() {
+      var _a3;
+      return (_a3 = this.getAttribute(Attributes2.TYPE)) != null ? _a3 : "";
+    }
+    set type(val) {
+      this.setAttribute(Attributes2.TYPE, `${val}`);
+    }
+    get value() {
+      var _a3;
+      return (_a3 = this.getAttribute(Attributes2.VALUE)) != null ? _a3 : this.text;
+    }
+    set value(val) {
+      this.setAttribute(Attributes2.VALUE, val);
+    }
+    get text() {
+      var _a3;
+      return ((_a3 = this.textContent) != null ? _a3 : "").trim();
+    }
+    get checked() {
+      if (!isCheckable(this))
+        return void 0;
+      return this.getAttribute("aria-checked") === "true";
+    }
+    set checked(value) {
+      if (!isCheckable(this))
+        return;
+      __privateSet5(this, _dirty, true);
+      this.setAttribute("aria-checked", value ? "true" : "false");
+      if (value) {
+        this.part.add("checked");
+      } else {
+        this.part.remove("checked");
+      }
+    }
+    handleClick(event) {
+      if (isCheckable(this))
+        return;
+      if (this.invokeTargetElement && containsComposedNode(this, event.target)) {
+        this.invokeTargetElement.dispatchEvent(
+          new InvokeEvent({ relatedTarget: this })
+        );
+      }
+    }
+    get keysUsed() {
+      return ["Enter", " "];
+    }
+  };
+  _dirty = /* @__PURE__ */ new WeakMap();
+  _ownerElement = /* @__PURE__ */ new WeakMap();
+  _handleSlotChange2 = /* @__PURE__ */ new WeakSet();
+  handleSlotChange_fn2 = function(event) {
+    const slot = event.target;
+    const isDefaultSlot = !(slot == null ? void 0 : slot.name);
+    if (isDefaultSlot) {
+      for (const node of slot.assignedNodes({ flatten: true })) {
+        if (node instanceof Text && node.textContent.trim() === "") {
+          node.remove();
+        }
+      }
+    }
+    if (slot.name === "submenu") {
+      if (this.submenuElement) {
+        __privateMethod3(this, _submenuConnected, submenuConnected_fn).call(this);
+      } else {
+        __privateMethod3(this, _submenuDisconnected, submenuDisconnected_fn).call(this);
+      }
+    }
+  };
+  _submenuConnected = /* @__PURE__ */ new WeakSet();
+  submenuConnected_fn = async function() {
+    this.setAttribute("aria-haspopup", "menu");
+    this.setAttribute("aria-expanded", `${!this.submenuElement.hidden}`);
+    this.submenuElement.addEventListener("change", __privateGet5(this, _handleMenuItem));
+    this.submenuElement.addEventListener("addmenuitem", __privateGet5(this, _handleMenuItem));
+    this.submenuElement.addEventListener(
+      "removemenuitem",
+      __privateGet5(this, _handleMenuItem)
+    );
+    __privateGet5(this, _handleMenuItem).call(this);
+  };
+  _submenuDisconnected = /* @__PURE__ */ new WeakSet();
+  submenuDisconnected_fn = function() {
+    this.removeAttribute("aria-haspopup");
+    this.removeAttribute("aria-expanded");
+    this.submenuElement.removeEventListener("change", __privateGet5(this, _handleMenuItem));
+    this.submenuElement.removeEventListener(
+      "addmenuitem",
+      __privateGet5(this, _handleMenuItem)
+    );
+    this.submenuElement.removeEventListener(
+      "removemenuitem",
+      __privateGet5(this, _handleMenuItem)
+    );
+    __privateGet5(this, _handleMenuItem).call(this);
+  };
+  _handleMenuItem = /* @__PURE__ */ new WeakMap();
+  _handleKeyUp = /* @__PURE__ */ new WeakSet();
+  handleKeyUp_fn = function(event) {
+    const { key } = event;
+    if (!this.keysUsed.includes(key)) {
+      this.removeEventListener("keyup", __privateMethod3(this, _handleKeyUp, handleKeyUp_fn));
+      return;
+    }
+    this.handleClick(event);
+  };
+  _handleKeyDown2 = /* @__PURE__ */ new WeakSet();
+  handleKeyDown_fn2 = function(event) {
+    const { metaKey, altKey, key } = event;
+    if (metaKey || altKey || !this.keysUsed.includes(key)) {
+      this.removeEventListener("keyup", __privateMethod3(this, _handleKeyUp, handleKeyUp_fn));
+      return;
+    }
+    this.addEventListener("keyup", __privateMethod3(this, _handleKeyUp, handleKeyUp_fn), { once: true });
+  };
+  _reset = /* @__PURE__ */ new WeakSet();
+  reset_fn = function() {
+    var _a3;
+    const items = (_a3 = __privateGet5(this, _ownerElement)) == null ? void 0 : _a3.radioGroupItems;
+    if (!items)
+      return;
+    let checkedItem = items.filter((item) => item.getAttribute("aria-checked") === "true").pop();
+    if (!checkedItem)
+      checkedItem = items[0];
+    for (const item of items) {
+      item.setAttribute("aria-checked", "false");
+    }
+    checkedItem == null ? void 0 : checkedItem.setAttribute("aria-checked", "true");
+  };
+  MediaChromeMenuItem.template = template2;
+  function isCheckable(item) {
+    return item.type === "radio" || item.type === "checkbox";
+  }
+  function closestMenuItemsContainer(childNode, parentNode) {
+    if (!childNode)
+      return null;
+    const { host } = childNode.getRootNode();
+    if (!parentNode && host)
+      return closestMenuItemsContainer(childNode, host);
+    if (parentNode == null ? void 0 : parentNode.items)
+      return parentNode;
+    return closestMenuItemsContainer(parentNode, parentNode == null ? void 0 : parentNode.parentNode);
+  }
+  if (!GlobalThis.customElements.get("media-chrome-menu-item")) {
+    GlobalThis.customElements.define(
+      "media-chrome-menu-item",
+      MediaChromeMenuItem
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-settings-menu.js
+  var template3 = Document2.createElement("template");
+  template3.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/
+  `
+  <style>
+    :host {
+      background: var(--media-settings-menu-background,
+        var(--media-menu-background,
+        var(--media-control-background,
+        var(--media-secondary-color, rgb(20 20 30 / .8)))));
+      min-width: var(--media-settings-menu-min-width, 170px);
+      border-radius: 2px 2px 0 0;
+      overflow: hidden;
+    }
+
+    :host([role="menu"]) {
+      ${/* Bottom fix setting menu items for animation when the height expands. */
+  ""}
+      justify-content: end;
+    }
+
+    slot:not([name]) {
+      justify-content: var(--media-settings-menu-justify-content);
+      flex-direction: var(--media-settings-menu-flex-direction, column);
+      overflow: visible;
+    }
+
+    #container.has-expanded {
+      --media-settings-menu-item-opacity: 0;
+    }
+  </style>
+`;
+  var MediaSettingsMenu = class extends MediaChromeMenu {
+    /**
+     * Returns the anchor element when it is a floating menu.
+     */
+    get anchorElement() {
+      if (this.anchor !== "auto")
+        return super.anchorElement;
+      return getMediaController(this).querySelector("media-settings-menu-button");
+    }
+  };
+  MediaSettingsMenu.template = template3;
+  if (!GlobalThis.customElements.get("media-settings-menu")) {
+    GlobalThis.customElements.define("media-settings-menu", MediaSettingsMenu);
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-settings-menu-item.js
+  var _a;
+  var template4 = Document2.createElement("template");
+  template4.innerHTML = MediaChromeMenuItem.template.innerHTML + /*html*/
+  `
+  <style>
+    slot:not([name="submenu"]) {
+      opacity: var(--media-settings-menu-item-opacity, var(--media-menu-item-opacity));
+    }
+
+    :host([aria-expanded="true"]:hover) {
+      background: transparent;
+    }
+  </style>
+`;
+  if ((_a = template4.content) == null ? void 0 : _a.querySelector) {
+    template4.content.querySelector('slot[name="suffix"]').innerHTML = /*html*/
+    `
+    <svg aria-hidden="true" viewBox="0 0 20 24">
+      <path d="m8.12 17.585-.742-.669 4.2-4.665-4.2-4.666.743-.669 4.803 5.335-4.803 5.334Z"/>
+    </svg>
+  `;
+  }
+  var MediaSettingsMenuItem = class extends MediaChromeMenuItem {
+  };
+  MediaSettingsMenuItem.template = template4;
+  if (!GlobalThis.customElements.get("media-settings-menu-item")) {
+    GlobalThis.customElements.define(
+      "media-settings-menu-item",
+      MediaSettingsMenuItem
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/media-chrome-button.js
+  var __accessCheck6 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet6 = (obj, member, getter) => {
+    __accessCheck6(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd6 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var __privateSet6 = (obj, member, value, setter) => {
+    __accessCheck6(obj, member, "write to private field");
+    setter ? setter.call(obj, value) : member.set(obj, value);
+    return value;
+  };
+  var _mediaController2;
+  var _clickListener;
+  var _keyupListener;
+  var _keydownListener;
+  var Attributes3 = {
+    TOOLTIP_PLACEMENT: "tooltipplacement"
+  };
+  var template5 = Document2.createElement("template");
+  template5.innerHTML = /*html*/
+  `
+<style>
+  :host {
+    position: relative;
+    font: var(--media-font,
+      var(--media-font-weight, bold)
+      var(--media-font-size, 14px) /
+      var(--media-text-content-height, var(--media-control-height, 24px))
+      var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
+    color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
+    background: var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)));
+    padding: var(--media-button-padding, var(--media-control-padding, 10px));
+    justify-content: var(--media-button-justify-content, center);
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    box-sizing: border-box;
+    transition: background .15s linear;
+    pointer-events: auto;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  ${/*
+    Only show outline when keyboard focusing.
+    https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+  */
+  ""}
+  :host(:focus-visible) {
+    box-shadow: inset 0 0 0 2px rgb(27 127 204 / .9);
+    outline: 0;
+  }
+  ${/*
+  * hide default focus ring, particularly when using mouse
+  */
+  ""}
+  :host(:where(:focus)) {
+    box-shadow: none;
+    outline: 0;
+  }
+
+  :host(:hover) {
+    background: var(--media-control-hover-background, rgba(50 50 70 / .7));
+  }
+
+  svg, img, ::slotted(svg), ::slotted(img) {
+    width: var(--media-button-icon-width);
+    height: var(--media-button-icon-height, var(--media-control-height, 24px));
+    transform: var(--media-button-icon-transform);
+    transition: var(--media-button-icon-transition);
+    fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238)));
+    vertical-align: middle;
+    max-width: 100%;
+    max-height: 100%;
+    min-width: 100%;
+  }
+
+  media-tooltip {
+    opacity: 0;
+    transition: opacity .3s;
+  }
+
+  :host(:hover) media-tooltip,
+  :host(:focus-visible) media-tooltip {
+    opacity: 1;
+  }
+
+  :host([notooltip]) slot[name="tooltip"] {
+    display: none;
+  }
+</style>
+
+<slot name="tooltip">
+  <media-tooltip>
+    <slot name="tooltip-content"></slot>
+  </media-tooltip>
+</slot>
+`;
+  var MediaChromeButton = class extends GlobalThis.HTMLElement {
+    constructor(options = {}) {
+      var _a3;
+      super();
+      __privateAdd6(this, _mediaController2, void 0);
+      this.preventClick = false;
+      this.tooltipEl = null;
+      this.tooltipContent = "";
+      __privateAdd6(this, _clickListener, (e) => {
+        if (!this.preventClick) {
+          this.handleClick(e);
+        }
+        setTimeout(this.tooltipEl.updateXOffset, 0);
+      });
+      __privateAdd6(this, _keyupListener, (e) => {
+        const { key } = e;
+        if (!this.keysUsed.includes(key)) {
+          this.removeEventListener("keyup", __privateGet6(this, _keyupListener));
+          return;
+        }
+        if (!this.preventClick) {
+          this.handleClick(e);
+        }
+      });
+      __privateAdd6(this, _keydownListener, (e) => {
+        const { metaKey, altKey, key } = e;
+        if (metaKey || altKey || !this.keysUsed.includes(key)) {
+          this.removeEventListener("keyup", __privateGet6(this, _keyupListener));
+          return;
+        }
+        this.addEventListener("keyup", __privateGet6(this, _keyupListener), { once: true });
+      });
+      if (!this.shadowRoot) {
+        this.attachShadow({ mode: "open" });
+        const buttonHTML = template5.content.cloneNode(true);
+        this.nativeEl = buttonHTML;
+        let slotTemplate7 = options.slotTemplate;
+        if (!slotTemplate7) {
+          slotTemplate7 = Document2.createElement("template");
+          slotTemplate7.innerHTML = `<slot>${options.defaultContent || ""}</slot>`;
+        }
+        if (options.tooltipContent) {
+          buttonHTML.querySelector('slot[name="tooltip-content"]').innerHTML = (_a3 = options.tooltipContent) != null ? _a3 : "";
+          this.tooltipContent = options.tooltipContent;
+        }
+        this.nativeEl.appendChild(slotTemplate7.content.cloneNode(true));
+        this.shadowRoot.appendChild(buttonHTML);
+        this.tooltipEl = this.shadowRoot.querySelector("media-tooltip");
+      }
+    }
+    static get observedAttributes() {
+      return [
+        "disabled",
+        Attributes3.TOOLTIP_PLACEMENT,
+        MediaStateReceiverAttributes.MEDIA_CONTROLLER
+      ];
+    }
+    enable() {
+      this.addEventListener("click", __privateGet6(this, _clickListener));
+      this.addEventListener("keydown", __privateGet6(this, _keydownListener));
+      this.tabIndex = 0;
+    }
+    disable() {
+      this.removeEventListener("click", __privateGet6(this, _clickListener));
+      this.removeEventListener("keydown", __privateGet6(this, _keydownListener));
+      this.removeEventListener("keyup", __privateGet6(this, _keyupListener));
+      this.tabIndex = -1;
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      var _a3, _b2, _c, _d, _e, _f, _g;
+      if (attrName === MediaStateReceiverAttributes.MEDIA_CONTROLLER) {
+        if (oldValue) {
+          (_b2 = (_a3 = __privateGet6(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+          __privateSet6(this, _mediaController2, null);
+        }
+        if (newValue && this.isConnected) {
+          __privateSet6(this, _mediaController2, (_c = this.getRootNode()) == null ? void 0 : _c.getElementById(newValue));
+          (_e = (_d = __privateGet6(this, _mediaController2)) == null ? void 0 : _d.associateElement) == null ? void 0 : _e.call(_d, this);
+        }
+      } else if (attrName === "disabled" && newValue !== oldValue) {
+        if (newValue == null) {
+          this.enable();
+        } else {
+          this.disable();
+        }
+      } else if (attrName === Attributes3.TOOLTIP_PLACEMENT && this.tooltipEl && newValue !== oldValue) {
+        this.tooltipEl.placement = newValue;
+      }
+      if (this.tooltipEl) {
+        (_g = (_f = this.tooltipEl) == null ? void 0 : _f.updateXOffset) == null ? void 0 : _g.call(_f);
+      }
+    }
+    connectedCallback() {
+      var _a3, _b2, _c;
+      const { style } = getOrInsertCSSRule(this.shadowRoot, ":host");
+      style.setProperty(
+        "display",
+        `var(--media-control-display, var(--${this.localName}-display, inline-flex))`
+      );
+      if (!this.hasAttribute("disabled")) {
+        this.enable();
+      }
+      this.setAttribute("role", "button");
+      const mediaControllerId = this.getAttribute(
+        MediaStateReceiverAttributes.MEDIA_CONTROLLER
+      );
+      if (mediaControllerId) {
+        __privateSet6(
+          this,
+          _mediaController2,
+          // @ts-ignore
+          (_a3 = this.getRootNode()) == null ? void 0 : _a3.getElementById(mediaControllerId)
+        );
+        (_c = (_b2 = __privateGet6(this, _mediaController2)) == null ? void 0 : _b2.associateElement) == null ? void 0 : _c.call(_b2, this);
+      }
+      GlobalThis.customElements.whenDefined("media-tooltip").then(this.setupTooltip.bind(this));
+    }
+    disconnectedCallback() {
+      var _a3, _b2, _c, _d;
+      this.disable();
+      (_b2 = (_a3 = __privateGet6(this, _mediaController2)) == null ? void 0 : _a3.unassociateElement) == null ? void 0 : _b2.call(_a3, this);
+      __privateSet6(this, _mediaController2, null);
+      this.removeEventListener("mouseenter", (_c = this.tooltipEl) == null ? void 0 : _c.updateXOffset);
+      this.removeEventListener("focus", (_d = this.tooltipEl) == null ? void 0 : _d.updateXOffset);
+      this.removeEventListener("click", __privateGet6(this, _clickListener));
+      this.tooltipEl = null;
+    }
+    get keysUsed() {
+      return ["Enter", " "];
+    }
+    /**
+     * Get or set tooltip placement
+     */
+    get tooltipPlacement() {
+      return getStringAttr(this, Attributes3.TOOLTIP_PLACEMENT);
+    }
+    set tooltipPlacement(value) {
+      setStringAttr(this, Attributes3.TOOLTIP_PLACEMENT, value);
+    }
+    /**
+     * @abstract
+     * @argument {Event} e
+     */
+    handleClick(e) {
+    }
+    // eslint-disable-line
+    // Called when we know the tooltip is ready / defined
+    setupTooltip() {
+      this.addEventListener("mouseenter", this.tooltipEl.updateXOffset);
+      this.addEventListener("focus", this.tooltipEl.updateXOffset);
+      this.addEventListener("click", __privateGet6(this, _clickListener));
+      const initialPlacement = this.tooltipPlacement;
+      if (initialPlacement)
+        this.tooltipEl.placement = initialPlacement;
+    }
+  };
+  _mediaController2 = /* @__PURE__ */ new WeakMap();
+  _clickListener = /* @__PURE__ */ new WeakMap();
+  _keyupListener = /* @__PURE__ */ new WeakMap();
+  _keydownListener = /* @__PURE__ */ new WeakMap();
+  if (!GlobalThis.customElements.get("media-chrome-button")) {
+    GlobalThis.customElements.define("media-chrome-button", MediaChromeButton);
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-chrome-menu-button.js
+  var MediaChromeMenuButton = class extends MediaChromeButton {
+    connectedCallback() {
+      super.connectedCallback();
+      if (this.invokeTargetElement) {
+        this.setAttribute("aria-haspopup", "menu");
+      }
+    }
+    get invokeTarget() {
+      return this.getAttribute("invoketarget");
+    }
+    set invokeTarget(value) {
+      this.setAttribute("invoketarget", `${value}`);
+    }
+    /**
+     * Returns the element with the id specified by the `invoketarget` attribute.
+     * @return {HTMLElement | null}
+     */
+    get invokeTargetElement() {
+      var _a3;
+      if (this.invokeTarget) {
+        return (_a3 = getDocumentOrShadowRoot(this)) == null ? void 0 : _a3.querySelector(
+          `#${this.invokeTarget}`
+        );
+      }
+      return null;
+    }
+    handleClick() {
+      var _a3;
+      (_a3 = this.invokeTargetElement) == null ? void 0 : _a3.dispatchEvent(
+        new InvokeEvent({ relatedTarget: this })
+      );
+    }
+  };
+  if (!GlobalThis.customElements.get("media-chrome-menu-button")) {
+    GlobalThis.customElements.define(
+      "media-chrome-menu-button",
+      MediaChromeMenuButton
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/labels/labels.js
+  var tooltipLabels = {
+    ENTER_AIRPLAY: "Start airplay",
+    EXIT_AIRPLAY: "Stop airplay",
+    AUDIO_TRACK_MENU: "Audio",
+    CAPTIONS: "Captions",
+    ENABLE_CAPTIONS: "Enable captions",
+    DISABLE_CAPTIONS: "Disable captions",
+    START_CAST: "Start casting",
+    STOP_CAST: "Stop casting",
+    ENTER_FULLSCREEN: "Enter fullscreen mode",
+    EXIT_FULLSCREEN: "Exit fullscreen mode",
+    MUTE: "Mute",
+    UNMUTE: "Unmute",
+    ENTER_PIP: "Enter picture in picture mode",
+    EXIT_PIP: "Enter picture in picture mode",
+    PLAY: "Play",
+    PAUSE: "Pause",
+    PLAYBACK_RATE: "Playback rate",
+    RENDITIONS: "Quality",
+    SEEK_BACKWARD: "Seek backward",
+    SEEK_FORWARD: "Seek forward",
+    SETTINGS: "Settings"
+  };
+  var nouns = {
+    AUDIO_PLAYER: () => "audio player",
+    VIDEO_PLAYER: () => "video player",
+    VOLUME: () => "volume",
+    SEEK: () => "seek",
+    CLOSED_CAPTIONS: () => "closed captions",
+    PLAYBACK_RATE: ({ playbackRate = 1 } = {}) => `current playback rate ${playbackRate}`,
+    PLAYBACK_TIME: () => `playback time`,
+    MEDIA_LOADING: () => `media loading`,
+    SETTINGS: () => `settings`,
+    AUDIO_TRACKS: () => `audio tracks`,
+    QUALITY: () => `quality`
+  };
+  var verbs = {
+    PLAY: () => "play",
+    PAUSE: () => "pause",
+    MUTE: () => "mute",
+    UNMUTE: () => "unmute",
+    ENTER_AIRPLAY: () => "start airplay",
+    EXIT_AIRPLAY: () => "stop airplay",
+    ENTER_CAST: () => "start casting",
+    EXIT_CAST: () => "stop casting",
+    ENTER_FULLSCREEN: () => "enter fullscreen mode",
+    EXIT_FULLSCREEN: () => "exit fullscreen mode",
+    ENTER_PIP: () => "enter picture in picture mode",
+    EXIT_PIP: () => "exit picture in picture mode",
+    SEEK_FORWARD_N_SECS: ({ seekOffset = 30 } = {}) => `seek forward ${seekOffset} seconds`,
+    SEEK_BACK_N_SECS: ({ seekOffset = 30 } = {}) => `seek back ${seekOffset} seconds`,
+    SEEK_LIVE: () => "seek to live",
+    PLAYING_LIVE: () => "playing live"
+  };
+  var labels_default = {
+    ...nouns,
+    ...verbs
+  };
+
+  // ../../node_modules/media-chrome/dist/menu/media-settings-menu-button.js
+  var slotTemplate = Document2.createElement("template");
+  slotTemplate.innerHTML = /*html*/
+  `
+  <style>
+    :host([aria-expanded="true"]) slot[name=tooltip] {
+      display: none;
+    }
+  </style>
+  <slot name="icon">
+    <svg aria-hidden="true" viewBox="0 0 24 24">
+      <path d="M4.5 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm7.5 0a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm7.5 0a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>
+    </svg>
+  </slot>
+`;
+  var MediaSettingsMenuButton = class extends MediaChromeMenuButton {
+    static get observedAttributes() {
+      return [...super.observedAttributes, "target"];
+    }
+    constructor() {
+      super({ slotTemplate, tooltipContent: tooltipLabels.SETTINGS });
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.setAttribute("aria-label", nouns.SETTINGS());
+    }
+    /**
+     * Returns the element with the id specified by the `invoketarget` attribute.
+     * @return {HTMLElement | null}
+     */
+    get invokeTargetElement() {
+      if (this.invokeTarget != void 0)
+        return super.invokeTargetElement;
+      return getMediaController(this).querySelector("media-settings-menu");
+    }
+  };
+  if (!GlobalThis.customElements.get("media-settings-menu-button")) {
+    GlobalThis.customElements.define(
+      "media-settings-menu-button",
+      MediaSettingsMenuButton
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-audio-track-menu.js
+  var __accessCheck7 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet7 = (obj, member, getter) => {
+    __accessCheck7(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd7 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var __privateSet7 = (obj, member, value, setter) => {
+    __accessCheck7(obj, member, "write to private field");
+    setter ? setter.call(obj, value) : member.set(obj, value);
+    return value;
+  };
+  var __privateMethod4 = (obj, member, method) => {
+    __accessCheck7(obj, member, "access private method");
+    return method;
+  };
+  var _audioTrackList;
+  var _prevState;
+  var _render;
+  var render_fn;
+  var _onChange;
+  var onChange_fn;
+  var MediaAudioTrackMenu = class extends MediaChromeMenu {
+    constructor() {
+      super(...arguments);
+      __privateAdd7(this, _render);
+      __privateAdd7(this, _onChange);
+      __privateAdd7(this, _audioTrackList, []);
+      __privateAdd7(this, _prevState, void 0);
+    }
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST,
+        MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED,
+        MediaUIAttributes.MEDIA_AUDIO_TRACK_UNAVAILABLE
+      ];
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      if (attrName === MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED && oldValue !== newValue) {
+        this.value = newValue;
+      } else if (attrName === MediaUIAttributes.MEDIA_AUDIO_TRACK_LIST && oldValue !== newValue) {
+        __privateSet7(this, _audioTrackList, parseAudioTrackList(newValue != null ? newValue : ""));
+        __privateMethod4(this, _render, render_fn).call(this);
+      }
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("change", __privateMethod4(this, _onChange, onChange_fn));
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener("change", __privateMethod4(this, _onChange, onChange_fn));
+    }
+    /**
+     * Returns the anchor element when it is a floating menu.
+     */
+    get anchorElement() {
+      var _a3;
+      if (this.anchor !== "auto")
+        return super.anchorElement;
+      return (_a3 = getMediaController(this)) == null ? void 0 : _a3.querySelector(
+        "media-audio-track-menu-button"
+      );
+    }
+    get mediaAudioTrackList() {
+      return __privateGet7(this, _audioTrackList);
+    }
+    set mediaAudioTrackList(list) {
+      __privateSet7(this, _audioTrackList, list);
+      __privateMethod4(this, _render, render_fn).call(this);
+    }
+    /**
+     * Get enabled audio track id.
+     */
+    get mediaAudioTrackEnabled() {
+      var _a3;
+      return (_a3 = getStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED)) != null ? _a3 : "";
+    }
+    set mediaAudioTrackEnabled(id) {
+      setStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED, id);
+    }
+  };
+  _audioTrackList = /* @__PURE__ */ new WeakMap();
+  _prevState = /* @__PURE__ */ new WeakMap();
+  _render = /* @__PURE__ */ new WeakSet();
+  render_fn = function() {
+    if (__privateGet7(this, _prevState) === JSON.stringify(this.mediaAudioTrackList))
+      return;
+    __privateSet7(this, _prevState, JSON.stringify(this.mediaAudioTrackList));
+    const audioTrackList = this.mediaAudioTrackList;
+    this.defaultSlot.textContent = "";
+    for (const audioTrack of audioTrackList) {
+      const text = this.formatMenuItemText(audioTrack.label, audioTrack);
+      const item = createMenuItem({
+        type: "radio",
+        text,
+        value: `${audioTrack.id}`,
+        checked: audioTrack.enabled
+      });
+      item.prepend(createIndicator(this, "checked-indicator"));
+      this.defaultSlot.append(item);
+    }
+  };
+  _onChange = /* @__PURE__ */ new WeakSet();
+  onChange_fn = function() {
+    if (this.value == null)
+      return;
+    const event = new GlobalThis.CustomEvent(
+      MediaUIEvents.MEDIA_AUDIO_TRACK_REQUEST,
+      {
+        composed: true,
+        bubbles: true,
+        detail: this.value
+      }
+    );
+    this.dispatchEvent(event);
+  };
+  if (!GlobalThis.customElements.get("media-audio-track-menu")) {
+    GlobalThis.customElements.define(
+      "media-audio-track-menu",
+      MediaAudioTrackMenu
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-audio-track-menu-button.js
+  var audioTrackIcon = (
+    /*html*/
+    `<svg aria-hidden="true" viewBox="0 0 24 24">
+  <path d="M11 17H9.5V7H11v10Zm-3-3H6.5v-4H8v4Zm6-5h-1.5v6H14V9Zm3 7h-1.5V8H17v8Z"/>
+  <path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"/>
+</svg>`
+  );
+  var slotTemplate2 = Document2.createElement("template");
+  slotTemplate2.innerHTML = /*html*/
+  `
+  <style>
+    :host([aria-expanded="true"]) slot[name=tooltip] {
+      display: none;
+    }
+  </style>
+  <slot name="icon">${audioTrackIcon}</slot>
+`;
+  var MediaAudioTrackMenuButton = class extends MediaChromeMenuButton {
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED,
+        MediaUIAttributes.MEDIA_AUDIO_TRACK_UNAVAILABLE
+      ];
+    }
+    constructor() {
+      super({ slotTemplate: slotTemplate2, tooltipContent: tooltipLabels.AUDIO_TRACK_MENU });
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.setAttribute("aria-label", nouns.AUDIO_TRACKS());
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+    }
+    /**
+     * Returns the element with the id specified by the `invoketarget` attribute.
+     * @return {HTMLElement | null}
+     */
+    get invokeTargetElement() {
+      var _a3;
+      if (this.invokeTarget != void 0)
+        return super.invokeTargetElement;
+      return (_a3 = getMediaController(this)) == null ? void 0 : _a3.querySelector("media-audio-track-menu");
+    }
+    /**
+     * Get enabled audio track id.
+     * @return {string}
+     */
+    get mediaAudioTrackEnabled() {
+      var _a3;
+      return (_a3 = getStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED)) != null ? _a3 : "";
+    }
+    set mediaAudioTrackEnabled(id) {
+      setStringAttr(this, MediaUIAttributes.MEDIA_AUDIO_TRACK_ENABLED, id);
+    }
+  };
+  if (!GlobalThis.customElements.get("media-audio-track-menu-button")) {
+    GlobalThis.customElements.define(
+      "media-audio-track-menu-button",
+      MediaAudioTrackMenuButton
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/utils/captions.js
+  var splitTextTracksStr = (textTracksStr = "") => textTracksStr.split(/\s+/);
+  var parseTextTrackStr = (textTrackStr = "") => {
+    const [kind, language, encodedLabel] = textTrackStr.split(":");
+    const label = encodedLabel ? decodeURIComponent(encodedLabel) : void 0;
+    return {
+      kind: kind === "cc" ? TextTrackKinds.CAPTIONS : TextTrackKinds.SUBTITLES,
+      language,
+      label
+    };
+  };
+  var parseTextTracksStr = (textTracksStr = "", textTrackLikeObj = {}) => {
+    return splitTextTracksStr(textTracksStr).map((textTrackStr) => {
+      const textTrackObj = parseTextTrackStr(textTrackStr);
+      return {
+        ...textTrackLikeObj,
+        ...textTrackObj
+      };
+    });
+  };
+  var formatTextTrackObj = ({ kind, label, language } = { kind: "subtitles" }) => {
+    if (!label)
+      return language;
+    return `${kind === "captions" ? "cc" : "sb"}:${language}:${encodeURIComponent(
+      label
+    )}`;
+  };
+  var stringifyTextTrackList = (textTracks = []) => {
+    return Array.prototype.map.call(textTracks, formatTextTrackObj).join(" ");
+  };
+  var areSubsOn = (el) => {
+    var _a3;
+    const showingSubtitles = !!((_a3 = el.mediaSubtitlesShowing) == null ? void 0 : _a3.length) || el.hasAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
+    return showingSubtitles;
+  };
+
+  // ../../node_modules/media-chrome/dist/menu/media-captions-menu.js
+  var __accessCheck8 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet8 = (obj, member, getter) => {
+    __accessCheck8(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd8 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var __privateSet8 = (obj, member, value, setter) => {
+    __accessCheck8(obj, member, "write to private field");
+    setter ? setter.call(obj, value) : member.set(obj, value);
+    return value;
+  };
+  var __privateMethod5 = (obj, member, method) => {
+    __accessCheck8(obj, member, "access private method");
+    return method;
+  };
+  var _prevState2;
+  var _render2;
+  var render_fn2;
+  var _onChange2;
+  var onChange_fn2;
+  var ccIcon = (
+    /*html*/
+    `
+  <svg aria-hidden="true" viewBox="0 0 26 24" part="captions-indicator indicator">
+    <path d="M22.83 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.39 9.45a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.92 3.92 0 0 1 .92-2.77 3.18 3.18 0 0 1 2.43-1 2.94 2.94 0 0 1 2.13.78c.364.359.62.813.74 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.17 1.61 1.61 0 0 0-1.29.58 2.79 2.79 0 0 0-.5 1.89 3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.48 1.48 0 0 0 1-.37 2.1 2.1 0 0 0 .59-1.14l1.4.44a3.23 3.23 0 0 1-1.07 1.69Zm7.22 0a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.88 3.88 0 0 1 .93-2.77 3.14 3.14 0 0 1 2.42-1 3 3 0 0 1 2.16.82 2.8 2.8 0 0 1 .73 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.21 1.61 1.61 0 0 0-1.29.58A2.79 2.79 0 0 0 15 12a3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.44 1.44 0 0 0 1-.37 2.1 2.1 0 0 0 .6-1.15l1.4.44a3.17 3.17 0 0 1-1.1 1.7Z"/>
+  </svg>`
+  );
+  var template6 = Document2.createElement("template");
+  template6.innerHTML = MediaChromeMenu.template.innerHTML + /*html*/
+  `
+  <slot name="captions-indicator" hidden>${ccIcon}</slot>`;
+  var MediaCaptionsMenu = class extends MediaChromeMenu {
+    constructor() {
+      super(...arguments);
+      __privateAdd8(this, _render2);
+      __privateAdd8(this, _onChange2);
+      __privateAdd8(this, _prevState2, void 0);
+    }
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        MediaUIAttributes.MEDIA_SUBTITLES_LIST,
+        MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
+      ];
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_LIST && oldValue !== newValue) {
+        __privateMethod5(this, _render2, render_fn2).call(this);
+      } else if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_SHOWING && oldValue !== newValue) {
+        this.value = newValue;
+      }
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("change", __privateMethod5(this, _onChange2, onChange_fn2));
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener("change", __privateMethod5(this, _onChange2, onChange_fn2));
+    }
+    /**
+     * Returns the anchor element when it is a floating menu.
+     */
+    get anchorElement() {
+      if (this.anchor !== "auto")
+        return super.anchorElement;
+      return getMediaController(this).querySelector("media-captions-menu-button");
+    }
+    /**
+     * @type {Array<object>} An array of TextTrack-like objects.
+     * Objects must have the properties: kind, language, and label.
+     */
+    get mediaSubtitlesList() {
+      return getSubtitlesListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST);
+    }
+    set mediaSubtitlesList(list) {
+      setSubtitlesListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST, list);
+    }
+    /**
+     * An array of TextTrack-like objects.
+     * Objects must have the properties: kind, language, and label.
+     */
+    get mediaSubtitlesShowing() {
+      return getSubtitlesListAttr(
+        this,
+        MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
+      );
+    }
+    set mediaSubtitlesShowing(list) {
+      setSubtitlesListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, list);
+    }
+  };
+  _prevState2 = /* @__PURE__ */ new WeakMap();
+  _render2 = /* @__PURE__ */ new WeakSet();
+  render_fn2 = function() {
+    var _a3;
+    if (__privateGet8(this, _prevState2) === JSON.stringify(this.mediaSubtitlesList))
+      return;
+    __privateSet8(this, _prevState2, JSON.stringify(this.mediaSubtitlesList));
+    this.defaultSlot.textContent = "";
+    const isOff = !this.value;
+    const item = createMenuItem({
+      type: "radio",
+      text: this.formatMenuItemText("Off"),
+      value: "off",
+      checked: isOff
+    });
+    item.prepend(createIndicator(this, "checked-indicator"));
+    this.defaultSlot.append(item);
+    const subtitlesList = this.mediaSubtitlesList;
+    for (const subs of subtitlesList) {
+      const item2 = createMenuItem({
+        type: "radio",
+        text: this.formatMenuItemText(subs.label, subs),
+        value: formatTextTrackObj(subs),
+        checked: this.value == formatTextTrackObj(subs)
+      });
+      item2.prepend(createIndicator(this, "checked-indicator"));
+      const type = (_a3 = subs.kind) != null ? _a3 : "subs";
+      if (type === "captions") {
+        item2.append(createIndicator(this, "captions-indicator"));
+      }
+      this.defaultSlot.append(item2);
+    }
+  };
+  _onChange2 = /* @__PURE__ */ new WeakSet();
+  onChange_fn2 = function() {
+    const showingSubs = this.mediaSubtitlesShowing;
+    const showingSubsStr = this.getAttribute(
+      MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
+    );
+    const localStateChange = this.value !== showingSubsStr;
+    if ((showingSubs == null ? void 0 : showingSubs.length) && localStateChange) {
+      this.dispatchEvent(
+        new GlobalThis.CustomEvent(
+          MediaUIEvents.MEDIA_DISABLE_SUBTITLES_REQUEST,
+          {
+            composed: true,
+            bubbles: true,
+            detail: showingSubs
+          }
+        )
+      );
+    }
+    if (!this.value || !localStateChange)
+      return;
+    const event = new GlobalThis.CustomEvent(
+      MediaUIEvents.MEDIA_SHOW_SUBTITLES_REQUEST,
+      {
+        composed: true,
+        bubbles: true,
+        detail: this.value
+      }
+    );
+    this.dispatchEvent(event);
+  };
+  MediaCaptionsMenu.template = template6;
+  var getSubtitlesListAttr = (el, attrName) => {
+    const attrVal = el.getAttribute(attrName);
+    return attrVal ? parseTextTracksStr(attrVal) : [];
+  };
+  var setSubtitlesListAttr = (el, attrName, list) => {
+    if (!(list == null ? void 0 : list.length)) {
+      el.removeAttribute(attrName);
+      return;
+    }
+    const newValStr = stringifyTextTrackList(list);
+    const oldVal = el.getAttribute(attrName);
+    if (oldVal === newValStr)
+      return;
+    el.setAttribute(attrName, newValStr);
+  };
+  if (!GlobalThis.customElements.get("media-captions-menu")) {
+    GlobalThis.customElements.define("media-captions-menu", MediaCaptionsMenu);
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-captions-menu-button.js
+  var __accessCheck9 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateAdd9 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var __privateSet9 = (obj, member, value, setter) => {
+    __accessCheck9(obj, member, "write to private field");
+    setter ? setter.call(obj, value) : member.set(obj, value);
+    return value;
+  };
+  var _captionsReady;
+  var ccIconOn = `<svg aria-hidden="true" viewBox="0 0 26 24">
+  <path d="M22.83 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.39 9.45a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.92 3.92 0 0 1 .92-2.77 3.18 3.18 0 0 1 2.43-1 2.94 2.94 0 0 1 2.13.78c.364.359.62.813.74 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.17 1.61 1.61 0 0 0-1.29.58 2.79 2.79 0 0 0-.5 1.89 3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.48 1.48 0 0 0 1-.37 2.1 2.1 0 0 0 .59-1.14l1.4.44a3.23 3.23 0 0 1-1.07 1.69Zm7.22 0a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.88 3.88 0 0 1 .93-2.77 3.14 3.14 0 0 1 2.42-1 3 3 0 0 1 2.16.82 2.8 2.8 0 0 1 .73 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.21 1.61 1.61 0 0 0-1.29.58A2.79 2.79 0 0 0 15 12a3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.44 1.44 0 0 0 1-.37 2.1 2.1 0 0 0 .6-1.15l1.4.44a3.17 3.17 0 0 1-1.1 1.7Z"/>
+</svg>`;
+  var ccIconOff = `<svg aria-hidden="true" viewBox="0 0 26 24">
+  <path d="M17.73 14.09a1.4 1.4 0 0 1-1 .37 1.579 1.579 0 0 1-1.27-.58A3 3 0 0 1 15 12a2.8 2.8 0 0 1 .5-1.85 1.63 1.63 0 0 1 1.29-.57 1.47 1.47 0 0 1 1.51 1.2l1.43-.34A2.89 2.89 0 0 0 19 9.07a3 3 0 0 0-2.14-.78 3.14 3.14 0 0 0-2.42 1 3.91 3.91 0 0 0-.93 2.78 3.74 3.74 0 0 0 .92 2.66 3.07 3.07 0 0 0 2.34 1 3.07 3.07 0 0 0 1.91-.57 3.17 3.17 0 0 0 1.07-1.74l-1.4-.45c-.083.43-.3.822-.62 1.12Zm-7.22 0a1.43 1.43 0 0 1-1 .37 1.58 1.58 0 0 1-1.27-.58A3 3 0 0 1 7.76 12a2.8 2.8 0 0 1 .5-1.85 1.63 1.63 0 0 1 1.29-.57 1.47 1.47 0 0 1 1.51 1.2l1.43-.34a2.81 2.81 0 0 0-.74-1.32 2.94 2.94 0 0 0-2.13-.78 3.18 3.18 0 0 0-2.43 1 4 4 0 0 0-.92 2.78 3.74 3.74 0 0 0 .92 2.66 3.07 3.07 0 0 0 2.34 1 3.07 3.07 0 0 0 1.91-.57 3.23 3.23 0 0 0 1.07-1.74l-1.4-.45a2.06 2.06 0 0 1-.6 1.07Zm12.32-8.41a2.59 2.59 0 0 0-2.3-2.51C18.72 3.05 15.86 3 13 3c-2.86 0-5.72.05-7.53.17a2.59 2.59 0 0 0-2.3 2.51c-.23 4.207-.23 8.423 0 12.63a2.57 2.57 0 0 0 2.3 2.5c1.81.13 4.67.19 7.53.19 2.86 0 5.72-.06 7.53-.19a2.57 2.57 0 0 0 2.3-2.5c.23-4.207.23-8.423 0-12.63Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.14-.21-8.29 0-12.43a1.11 1.11 0 0 1 .91-1.11C7.24 4.56 10 4.49 13 4.49s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.14.21 8.29 0 12.43Z"/>
+</svg>`;
+  var slotTemplate3 = Document2.createElement("template");
+  slotTemplate3.innerHTML = /*html*/
+  `
+  <style>
+    :host([aria-checked="true"]) slot[name=off] {
+      display: none !important;
+    }
+
+    ${/* Double negative, but safer if display doesn't equal 'block' */
+  ""}
+    :host(:not([aria-checked="true"])) slot[name=on] {
+      display: none !important;
+    }
+
+    :host([aria-expanded="true"]) slot[name=tooltip] {
+      display: none;
+    }
+  </style>
+
+  <slot name="icon">
+    <slot name="on">${ccIconOn}</slot>
+    <slot name="off">${ccIconOff}</slot>
+  </slot>
+`;
+  var updateAriaChecked = (el) => {
+    el.setAttribute("aria-checked", areSubsOn(el).toString());
+  };
+  var MediaCaptionsMenuButton = class extends MediaChromeMenuButton {
+    constructor(options = {}) {
+      super({ slotTemplate: slotTemplate3, tooltipContent: tooltipLabels.CAPTIONS, ...options });
+      __privateAdd9(this, _captionsReady, void 0);
+      __privateSet9(this, _captionsReady, false);
+    }
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        MediaUIAttributes.MEDIA_SUBTITLES_LIST,
+        MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
+      ];
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.setAttribute("aria-label", nouns.CLOSED_CAPTIONS());
+      updateAriaChecked(this);
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      if (attrName === MediaUIAttributes.MEDIA_SUBTITLES_SHOWING) {
+        updateAriaChecked(this);
+      }
+    }
+    /**
+     * Returns the element with the id specified by the `invoketarget` attribute.
+     * @return {HTMLElement | null}
+     */
+    get invokeTargetElement() {
+      var _a3;
+      if (this.invokeTarget != void 0)
+        return super.invokeTargetElement;
+      return (_a3 = getMediaController(this)) == null ? void 0 : _a3.querySelector("media-captions-menu");
+    }
+    /**
+     * An array of TextTrack-like objects.
+     * Objects must have the properties: kind, language, and label.
+     */
+    get mediaSubtitlesList() {
+      return getSubtitlesListAttr2(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST);
+    }
+    set mediaSubtitlesList(list) {
+      setSubtitlesListAttr2(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST, list);
+    }
+    /**
+     * An array of TextTrack-like objects.
+     * Objects must have the properties: kind, language, and label.
+     */
+    get mediaSubtitlesShowing() {
+      return getSubtitlesListAttr2(
+        this,
+        MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
+      );
+    }
+    set mediaSubtitlesShowing(list) {
+      setSubtitlesListAttr2(this, MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, list);
+    }
+  };
+  _captionsReady = /* @__PURE__ */ new WeakMap();
+  var getSubtitlesListAttr2 = (el, attrName) => {
+    const attrVal = el.getAttribute(attrName);
+    return attrVal ? parseTextTracksStr(attrVal) : [];
+  };
+  var setSubtitlesListAttr2 = (el, attrName, list) => {
+    if (!(list == null ? void 0 : list.length)) {
+      el.removeAttribute(attrName);
+      return;
+    }
+    const newValStr = stringifyTextTrackList(list);
+    const oldVal = el.getAttribute(attrName);
+    if (oldVal === newValStr)
+      return;
+    el.setAttribute(attrName, newValStr);
+  };
+  if (!GlobalThis.customElements.get("media-captions-menu-button")) {
+    GlobalThis.customElements.define(
+      "media-captions-menu-button",
+      MediaCaptionsMenuButton
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/utils/attribute-token-list.js
+  var __accessCheck10 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet9 = (obj, member, getter) => {
+    __accessCheck10(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd10 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var __privateSet10 = (obj, member, value, setter) => {
+    __accessCheck10(obj, member, "write to private field");
+    setter ? setter.call(obj, value) : member.set(obj, value);
+    return value;
+  };
+  var _el;
+  var _attr;
+  var _defaultSet;
+  var _tokenSet;
+  var _tokens;
+  var tokens_get;
+  var AttributeTokenList = class {
+    constructor(el, attr, { defaultValue } = { defaultValue: void 0 }) {
+      __privateAdd10(this, _tokens);
+      __privateAdd10(this, _el, void 0);
+      __privateAdd10(this, _attr, void 0);
+      __privateAdd10(this, _defaultSet, void 0);
+      __privateAdd10(this, _tokenSet, /* @__PURE__ */ new Set());
+      __privateSet10(this, _el, el);
+      __privateSet10(this, _attr, attr);
+      __privateSet10(this, _defaultSet, new Set(defaultValue));
+    }
+    [Symbol.iterator]() {
+      return __privateGet9(this, _tokens, tokens_get).values();
+    }
+    get length() {
+      return __privateGet9(this, _tokens, tokens_get).size;
+    }
+    get value() {
+      var _a3;
+      return (_a3 = [...__privateGet9(this, _tokens, tokens_get)].join(" ")) != null ? _a3 : "";
+    }
+    set value(val) {
+      var _a3;
+      if (val === this.value)
+        return;
+      __privateSet10(this, _tokenSet, /* @__PURE__ */ new Set());
+      this.add(...(_a3 = val == null ? void 0 : val.split(" ")) != null ? _a3 : []);
+    }
+    toString() {
+      return this.value;
+    }
+    item(index) {
+      return [...__privateGet9(this, _tokens, tokens_get)][index];
+    }
+    values() {
+      return __privateGet9(this, _tokens, tokens_get).values();
+    }
+    forEach(callback, thisArg) {
+      __privateGet9(this, _tokens, tokens_get).forEach(callback, thisArg);
+    }
+    add(...tokens) {
+      var _a3, _b2;
+      tokens.forEach((t) => __privateGet9(this, _tokenSet).add(t));
+      if (this.value === "" && !((_a3 = __privateGet9(this, _el)) == null ? void 0 : _a3.hasAttribute(`${__privateGet9(this, _attr)}`))) {
+        return;
+      }
+      (_b2 = __privateGet9(this, _el)) == null ? void 0 : _b2.setAttribute(`${__privateGet9(this, _attr)}`, `${this.value}`);
+    }
+    remove(...tokens) {
+      var _a3;
+      tokens.forEach((t) => __privateGet9(this, _tokenSet).delete(t));
+      (_a3 = __privateGet9(this, _el)) == null ? void 0 : _a3.setAttribute(`${__privateGet9(this, _attr)}`, `${this.value}`);
+    }
+    contains(token) {
+      return __privateGet9(this, _tokens, tokens_get).has(token);
+    }
+    toggle(token, force) {
+      if (typeof force !== "undefined") {
+        if (force) {
+          this.add(token);
+          return true;
+        } else {
+          this.remove(token);
+          return false;
+        }
+      }
+      if (this.contains(token)) {
+        this.remove(token);
+        return false;
+      }
+      this.add(token);
+      return true;
+    }
+    replace(oldToken, newToken) {
+      this.remove(oldToken);
+      this.add(newToken);
+      return oldToken === newToken;
+    }
+  };
+  _el = /* @__PURE__ */ new WeakMap();
+  _attr = /* @__PURE__ */ new WeakMap();
+  _defaultSet = /* @__PURE__ */ new WeakMap();
+  _tokenSet = /* @__PURE__ */ new WeakMap();
+  _tokens = /* @__PURE__ */ new WeakSet();
+  tokens_get = function() {
+    return __privateGet9(this, _tokenSet).size ? __privateGet9(this, _tokenSet) : __privateGet9(this, _defaultSet);
+  };
+
+  // ../../node_modules/media-chrome/dist/media-playback-rate-button.js
+  var __accessCheck11 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet10 = (obj, member, getter) => {
+    __accessCheck11(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd11 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var _rates;
+  var Attributes4 = {
+    RATES: "rates"
+  };
+  var DEFAULT_RATES = [1, 1.2, 1.5, 1.7, 2];
+  var DEFAULT_RATE = 1;
+  var slotTemplate4 = Document2.createElement("template");
+  slotTemplate4.innerHTML = /*html*/
+  `
+  <style>
+    :host {
+      min-width: 5ch;
+      padding: var(--media-button-padding, var(--media-control-padding, 10px 5px));
+    }
+  </style>
+  <slot name="icon"></slot>
+`;
+  var MediaPlaybackRateButton = class extends MediaChromeButton {
+    constructor(options = {}) {
+      super({
+        slotTemplate: slotTemplate4,
+        tooltipContent: tooltipLabels.PLAYBACK_RATE,
+        ...options
+      });
+      __privateAdd11(this, _rates, new AttributeTokenList(this, Attributes4.RATES, {
+        defaultValue: DEFAULT_RATES
+      }));
+      this.container = this.shadowRoot.querySelector('slot[name="icon"]');
+      this.container.innerHTML = `${DEFAULT_RATE}x`;
+    }
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        MediaUIAttributes.MEDIA_PLAYBACK_RATE,
+        Attributes4.RATES
+      ];
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      if (attrName === Attributes4.RATES) {
+        __privateGet10(this, _rates).value = newValue;
+      }
+      if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE) {
+        const newPlaybackRate = newValue ? +newValue : Number.NaN;
+        const playbackRate = !Number.isNaN(newPlaybackRate) ? newPlaybackRate : DEFAULT_RATE;
+        this.container.innerHTML = `${playbackRate}x`;
+        this.setAttribute("aria-label", nouns.PLAYBACK_RATE({ playbackRate }));
+      }
+    }
+    /**
+     * @type { AttributeTokenList | Array<number> | undefined} Will return a DOMTokenList.
+     * Setting a value will accept an array of numbers.
+     */
+    get rates() {
+      return __privateGet10(this, _rates);
+    }
+    set rates(value) {
+      if (!value) {
+        __privateGet10(this, _rates).value = "";
+      } else if (Array.isArray(value)) {
+        __privateGet10(this, _rates).value = value.join(" ");
+      }
+    }
+    /**
+     * @type {number} The current playback rate
+     */
+    get mediaPlaybackRate() {
+      return getNumericAttr(
+        this,
+        MediaUIAttributes.MEDIA_PLAYBACK_RATE,
+        DEFAULT_RATE
+      );
+    }
+    set mediaPlaybackRate(value) {
+      setNumericAttr(this, MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
+    }
+    handleClick() {
+      var _a3, _b2;
+      const availableRates = Array.from(this.rates.values(), (str) => +str).sort(
+        (a, b) => a - b
+      );
+      const detail = (_b2 = (_a3 = availableRates.find((r) => r > this.mediaPlaybackRate)) != null ? _a3 : availableRates[0]) != null ? _b2 : DEFAULT_RATE;
+      const evt = new GlobalThis.CustomEvent(
+        MediaUIEvents.MEDIA_PLAYBACK_RATE_REQUEST,
+        { composed: true, bubbles: true, detail }
+      );
+      this.dispatchEvent(evt);
+    }
+  };
+  _rates = /* @__PURE__ */ new WeakMap();
+  if (!GlobalThis.customElements.get("media-playback-rate-button")) {
+    GlobalThis.customElements.define(
+      "media-playback-rate-button",
+      MediaPlaybackRateButton
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-playback-rate-menu.js
+  var __accessCheck12 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet11 = (obj, member, getter) => {
+    __accessCheck12(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd12 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var __privateMethod6 = (obj, member, method) => {
+    __accessCheck12(obj, member, "access private method");
+    return method;
+  };
+  var _rates2;
+  var _render3;
+  var render_fn3;
+  var _onChange3;
+  var onChange_fn3;
+  var Attributes5 = {
+    RATES: "rates"
+  };
+  var MediaPlaybackRateMenu = class extends MediaChromeMenu {
+    constructor() {
+      super();
+      __privateAdd12(this, _render3);
+      __privateAdd12(this, _onChange3);
+      __privateAdd12(this, _rates2, new AttributeTokenList(this, Attributes5.RATES, {
+        defaultValue: DEFAULT_RATES
+      }));
+      __privateMethod6(this, _render3, render_fn3).call(this);
+    }
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        MediaUIAttributes.MEDIA_PLAYBACK_RATE,
+        Attributes5.RATES
+      ];
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE && oldValue != newValue) {
+        this.value = newValue;
+      } else if (attrName === Attributes5.RATES && oldValue != newValue) {
+        __privateGet11(this, _rates2).value = newValue;
+        __privateMethod6(this, _render3, render_fn3).call(this);
+      }
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("change", __privateMethod6(this, _onChange3, onChange_fn3));
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener("change", __privateMethod6(this, _onChange3, onChange_fn3));
+    }
+    /**
+     * Returns the anchor element when it is a floating menu.
+     */
+    get anchorElement() {
+      if (this.anchor !== "auto")
+        return super.anchorElement;
+      return getMediaController(this).querySelector(
+        "media-playback-rate-menu-button"
+      );
+    }
+    /**
+     * Will return a DOMTokenList.
+     * Setting a value will accept an array of numbers.
+     */
+    get rates() {
+      return __privateGet11(this, _rates2);
+    }
+    set rates(value) {
+      if (!value) {
+        __privateGet11(this, _rates2).value = "";
+      } else if (Array.isArray(value)) {
+        __privateGet11(this, _rates2).value = value.join(" ");
+      }
+      __privateMethod6(this, _render3, render_fn3).call(this);
+    }
+    /**
+     * The current playback rate
+     */
+    get mediaPlaybackRate() {
+      return getNumericAttr(
+        this,
+        MediaUIAttributes.MEDIA_PLAYBACK_RATE,
+        DEFAULT_RATE
+      );
+    }
+    set mediaPlaybackRate(value) {
+      setNumericAttr(this, MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
+    }
+  };
+  _rates2 = /* @__PURE__ */ new WeakMap();
+  _render3 = /* @__PURE__ */ new WeakSet();
+  render_fn3 = function() {
+    this.defaultSlot.textContent = "";
+    for (const rate of this.rates) {
+      const item = createMenuItem({
+        type: "radio",
+        text: this.formatMenuItemText(`${rate}x`, rate),
+        value: rate,
+        checked: this.mediaPlaybackRate == rate
+      });
+      item.prepend(createIndicator(this, "checked-indicator"));
+      this.defaultSlot.append(item);
+    }
+  };
+  _onChange3 = /* @__PURE__ */ new WeakSet();
+  onChange_fn3 = function() {
+    if (!this.value)
+      return;
+    const event = new GlobalThis.CustomEvent(
+      MediaUIEvents.MEDIA_PLAYBACK_RATE_REQUEST,
+      {
+        composed: true,
+        bubbles: true,
+        detail: this.value
+      }
+    );
+    this.dispatchEvent(event);
+  };
+  if (!GlobalThis.customElements.get("media-playback-rate-menu")) {
+    GlobalThis.customElements.define(
+      "media-playback-rate-menu",
+      MediaPlaybackRateMenu
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-playback-rate-menu-button.js
+  var __accessCheck13 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet12 = (obj, member, getter) => {
+    __accessCheck13(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd13 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var _rates3;
+  var Attributes6 = {
+    RATES: "rates"
+  };
+  var DEFAULT_RATES2 = [1, 1.2, 1.5, 1.7, 2];
+  var DEFAULT_RATE2 = 1;
+  var slotTemplate5 = Document2.createElement("template");
+  slotTemplate5.innerHTML = /*html*/
+  `
+  <style>
+    :host {
+      min-width: 5ch;
+      padding: var(--media-button-padding, var(--media-control-padding, 10px 5px));
+    }
+    
+    :host([aria-expanded="true"]) slot[name=tooltip] {
+      display: none;
+    }
+  </style>
+  <slot name="icon"></slot>
+`;
+  var MediaPlaybackRateMenuButton = class extends MediaChromeMenuButton {
+    constructor(options = {}) {
+      super({
+        slotTemplate: slotTemplate5,
+        tooltipContent: tooltipLabels.PLAYBACK_RATE,
+        ...options
+      });
+      __privateAdd13(this, _rates3, new AttributeTokenList(this, Attributes6.RATES, {
+        defaultValue: DEFAULT_RATES2
+      }));
+      this.container = this.shadowRoot.querySelector('slot[name="icon"]');
+      this.container.innerHTML = `${DEFAULT_RATE2}x`;
+    }
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        MediaUIAttributes.MEDIA_PLAYBACK_RATE,
+        Attributes6.RATES
+      ];
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      if (attrName === Attributes6.RATES) {
+        __privateGet12(this, _rates3).value = newValue;
+      }
+      if (attrName === MediaUIAttributes.MEDIA_PLAYBACK_RATE) {
+        const newPlaybackRate = newValue ? +newValue : Number.NaN;
+        const playbackRate = !Number.isNaN(newPlaybackRate) ? newPlaybackRate : DEFAULT_RATE2;
+        this.container.innerHTML = `${playbackRate}x`;
+        this.setAttribute("aria-label", nouns.PLAYBACK_RATE({ playbackRate }));
+      }
+    }
+    /**
+     * Returns the element with the id specified by the `invoketarget` attribute.
+     */
+    get invokeTargetElement() {
+      if (this.invokeTarget != void 0)
+        return super.invokeTargetElement;
+      return getMediaController(this).querySelector("media-playback-rate-menu");
+    }
+    /**
+     * Will return a DOMTokenList.
+     * Setting a value will accept an array of numbers.
+     */
+    get rates() {
+      return __privateGet12(this, _rates3);
+    }
+    set rates(value) {
+      if (!value) {
+        __privateGet12(this, _rates3).value = "";
+      } else if (Array.isArray(value)) {
+        __privateGet12(this, _rates3).value = value.join(" ");
+      }
+    }
+    /**
+     * The current playback rate
+     */
+    get mediaPlaybackRate() {
+      return getNumericAttr(
+        this,
+        MediaUIAttributes.MEDIA_PLAYBACK_RATE,
+        DEFAULT_RATE2
+      );
+    }
+    set mediaPlaybackRate(value) {
+      setNumericAttr(this, MediaUIAttributes.MEDIA_PLAYBACK_RATE, value);
+    }
+  };
+  _rates3 = /* @__PURE__ */ new WeakMap();
+  if (!GlobalThis.customElements.get("media-playback-rate-menu-button")) {
+    GlobalThis.customElements.define(
+      "media-playback-rate-menu-button",
+      MediaPlaybackRateMenuButton
+    );
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-rendition-menu.js
+  var __accessCheck14 = (obj, member, msg) => {
+    if (!member.has(obj))
+      throw TypeError("Cannot " + msg);
+  };
+  var __privateGet13 = (obj, member, getter) => {
+    __accessCheck14(obj, member, "read from private field");
+    return getter ? getter.call(obj) : member.get(obj);
+  };
+  var __privateAdd14 = (obj, member, value) => {
+    if (member.has(obj))
+      throw TypeError("Cannot add the same private member more than once");
+    member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+  };
+  var __privateSet11 = (obj, member, value, setter) => {
+    __accessCheck14(obj, member, "write to private field");
+    setter ? setter.call(obj, value) : member.set(obj, value);
+    return value;
+  };
+  var __privateMethod7 = (obj, member, method) => {
+    __accessCheck14(obj, member, "access private method");
+    return method;
+  };
+  var _renditionList;
+  var _prevState3;
+  var _render4;
+  var render_fn4;
+  var _onChange4;
+  var onChange_fn4;
+  var MediaRenditionMenu = class extends MediaChromeMenu {
+    constructor() {
+      super(...arguments);
+      __privateAdd14(this, _render4);
+      __privateAdd14(this, _onChange4);
+      __privateAdd14(this, _renditionList, []);
+      __privateAdd14(this, _prevState3, {});
+    }
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        MediaUIAttributes.MEDIA_RENDITION_LIST,
+        MediaUIAttributes.MEDIA_RENDITION_SELECTED,
+        MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+        MediaUIAttributes.MEDIA_HEIGHT
+      ];
+    }
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      if (attrName === MediaUIAttributes.MEDIA_RENDITION_SELECTED && oldValue !== newValue) {
+        this.value = newValue != null ? newValue : "auto";
+      } else if (attrName === MediaUIAttributes.MEDIA_RENDITION_LIST && oldValue !== newValue) {
+        __privateSet11(this, _renditionList, parseRenditionList(newValue));
+        __privateMethod7(this, _render4, render_fn4).call(this);
+      } else if (attrName === MediaUIAttributes.MEDIA_HEIGHT && oldValue !== newValue) {
+        __privateMethod7(this, _render4, render_fn4).call(this);
+      }
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("change", __privateMethod7(this, _onChange4, onChange_fn4));
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener("change", __privateMethod7(this, _onChange4, onChange_fn4));
+    }
+    /**
+     * Returns the anchor element when it is a floating menu.
+     */
+    get anchorElement() {
+      if (this.anchor !== "auto")
+        return super.anchorElement;
+      return getMediaController(this).querySelector(
+        "media-rendition-menu-button"
+      );
+    }
+    get mediaRenditionList() {
+      return __privateGet13(this, _renditionList);
+    }
+    set mediaRenditionList(list) {
+      __privateSet11(this, _renditionList, list);
+      __privateMethod7(this, _render4, render_fn4).call(this);
+    }
+    /**
+     * Get selected rendition id.
+     */
+    get mediaRenditionSelected() {
+      return getStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED);
+    }
+    set mediaRenditionSelected(id) {
+      setStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED, id);
+    }
+    get mediaHeight() {
+      return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
+    }
+    set mediaHeight(height) {
+      setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
+    }
+  };
+  _renditionList = /* @__PURE__ */ new WeakMap();
+  _prevState3 = /* @__PURE__ */ new WeakMap();
+  _render4 = /* @__PURE__ */ new WeakSet();
+  render_fn4 = function() {
+    if (__privateGet13(this, _prevState3).mediaRenditionList === JSON.stringify(this.mediaRenditionList) && __privateGet13(this, _prevState3).mediaHeight === this.mediaHeight)
+      return;
+    __privateGet13(this, _prevState3).mediaRenditionList = JSON.stringify(this.mediaRenditionList);
+    __privateGet13(this, _prevState3).mediaHeight = this.mediaHeight;
+    const renditionList = this.mediaRenditionList.sort(
+      (a, b) => b.height - a.height
+    );
+    for (const rendition of renditionList) {
+      rendition.selected = rendition.id === this.mediaRenditionSelected;
+    }
+    this.defaultSlot.textContent = "";
+    const isAuto = !this.mediaRenditionSelected;
+    for (const rendition of renditionList) {
+      const text = this.formatMenuItemText(
+        `${Math.min(rendition.width, rendition.height)}p`,
+        rendition
+      );
+      const item2 = createMenuItem({
+        type: "radio",
+        text,
+        value: `${rendition.id}`,
+        checked: rendition.selected && !isAuto
+      });
+      item2.prepend(createIndicator(this, "checked-indicator"));
+      this.defaultSlot.append(item2);
+    }
+    const item = createMenuItem({
+      type: "radio",
+      text: this.formatMenuItemText("Auto"),
+      value: "auto",
+      checked: isAuto
+    });
+    const autoDescription = this.mediaHeight > 0 ? `Auto (${this.mediaHeight}p)` : "Auto";
+    item.dataset.description = autoDescription;
+    item.prepend(createIndicator(this, "checked-indicator"));
+    this.defaultSlot.append(item);
+  };
+  _onChange4 = /* @__PURE__ */ new WeakSet();
+  onChange_fn4 = function() {
+    if (this.value == null)
+      return;
+    const event = new GlobalThis.CustomEvent(
+      MediaUIEvents.MEDIA_RENDITION_REQUEST,
+      {
+        composed: true,
+        bubbles: true,
+        detail: this.value
+      }
+    );
+    this.dispatchEvent(event);
+  };
+  if (!GlobalThis.customElements.get("media-rendition-menu")) {
+    GlobalThis.customElements.define("media-rendition-menu", MediaRenditionMenu);
+  }
+
+  // ../../node_modules/media-chrome/dist/menu/media-rendition-menu-button.js
+  var renditionIcon = (
+    /*html*/
+    `<svg aria-hidden="true" viewBox="0 0 24 24">
+  <path d="M13.5 2.5h2v6h-2v-2h-11v-2h11v-2Zm4 2h4v2h-4v-2Zm-12 4h2v6h-2v-2h-3v-2h3v-2Zm4 2h12v2h-12v-2Zm1 4h2v6h-2v-2h-8v-2h8v-2Zm4 2h7v2h-7v-2Z" />
+</svg>`
+  );
+  var slotTemplate6 = Document2.createElement("template");
+  slotTemplate6.innerHTML = /*html*/
+  `
+  <style>
+    :host([aria-expanded="true"]) slot[name=tooltip] {
+      display: none;
+    }
+  </style>
+  <slot name="icon">${renditionIcon}</slot>
+`;
+  var MediaRenditionMenuButton = class extends MediaChromeMenuButton {
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        MediaUIAttributes.MEDIA_RENDITION_SELECTED,
+        MediaUIAttributes.MEDIA_RENDITION_UNAVAILABLE,
+        MediaUIAttributes.MEDIA_HEIGHT
+      ];
+    }
+    constructor() {
+      super({ slotTemplate: slotTemplate6, tooltipContent: tooltipLabels.RENDITIONS });
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.setAttribute("aria-label", nouns.QUALITY());
+    }
+    /**
+     * Returns the element with the id specified by the `invoketarget` attribute.
+     */
+    get invokeTargetElement() {
+      if (this.invokeTarget != void 0)
+        return super.invokeTargetElement;
+      return getMediaController(this).querySelector("media-rendition-menu");
+    }
+    /**
+     * Get selected rendition id.
+     */
+    get mediaRenditionSelected() {
+      return getStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED);
+    }
+    set mediaRenditionSelected(id) {
+      setStringAttr(this, MediaUIAttributes.MEDIA_RENDITION_SELECTED, id);
+    }
+    get mediaHeight() {
+      return getNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT);
+    }
+    set mediaHeight(height) {
+      setNumericAttr(this, MediaUIAttributes.MEDIA_HEIGHT, height);
+    }
+  };
+  if (!GlobalThis.customElements.get("media-rendition-menu-button")) {
+    GlobalThis.customElements.define(
+      "media-rendition-menu-button",
+      MediaRenditionMenuButton
+    );
+  }
+
   // src/themes/gerwig/index.ts
-  var template = internalDocument.createElement("template");
-  if ("innerHTML" in template)
-    template.innerHTML = gerwig_default;
-  var _a, _b;
+  var template7 = internalDocument.createElement("template");
+  if ("innerHTML" in template7)
+    template7.innerHTML = gerwig_default;
+  var _a2, _b;
   var MediaThemeGerwig = class extends MediaThemeElement {
   };
-  MediaThemeGerwig.template = (_b = (_a = template.content) == null ? void 0 : _a.children) == null ? void 0 : _b[0];
+  MediaThemeGerwig.template = (_b = (_a2 = template7.content) == null ? void 0 : _a2.children) == null ? void 0 : _b[0];
   if (!internalGlobalThis.customElements.get("media-theme-gerwig")) {
     internalGlobalThis.customElements.define("media-theme-gerwig", MediaThemeGerwig);
   }