@hanifhan1f/vidstack 1.12.13 → 1.12.18

package/server/chunks/vidstack-DE4b5Bgx.js

@@ -0,0 +1,2002 @@
+import { createContext, useContext, prop, Component, computed, provideContext, signal, isBoolean, effect, setAttribute, uppercaseFirstChar, isNil, isString, noop, isFunction, unwrap, isArray, camelToKebabCase, tick, peek, isKeyboardClick, toggleClass, Host, listenEvent } from './vidstack-B8LynzY5.js';
+import { useMediaContext, watchColorScheme, useMediaState, getDownloadFile, appendParamsToURL, watchActiveTextTrack, useResizeObserver, useActive, useTransitionActive, isHTMLElement, createSlot } from './vidstack-B4CWj0Hp.js';
+import { $signal, LayoutIconsLoader, Icon, SlotManager } from './vidstack-CdBfecZT.js';
+import { LitElement } from './vidstack-CwTj4H1w.js';
+import { html } from 'lit-html';
+import { ref } from 'lit-html/directives/ref.js';
+import { keyed } from 'lit-html/directives/keyed.js';
+import { $ariaBool, sortVideoQualities } from './vidstack-BOTZD4tC.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+
+const defaultLayoutContext = createContext();
+function useDefaultLayoutContext() {
+  return useContext(defaultLayoutContext);
+}
+
+const defaultLayoutProps = {
+  colorScheme: "system",
+  download: null,
+  customIcons: false,
+  disableTimeSlider: false,
+  menuContainer: null,
+  menuGroup: "bottom",
+  noAudioGain: false,
+  noGestures: false,
+  noKeyboardAnimations: false,
+  noModal: false,
+  noScrubGesture: false,
+  playbackRates: { min: 0, max: 2, step: 0.25 },
+  audioGains: { min: 0, max: 300, step: 25 },
+  seekStep: 5,
+  sliderChaptersMinWidth: 325,
+  hideQualityBitrate: false,
+  episodes: null,
+  episodesTitle: "Episodes",
+  smallWhen: false,
+  thumbnails: null,
+  translations: null,
+  when: false
+};
+
+class DefaultLayout extends Component {
+  static props = defaultLayoutProps;
+  #media;
+  #when = computed(() => {
+    const when = this.$props.when();
+    return this.#matches(when);
+  });
+  #smallWhen = computed(() => {
+    const when = this.$props.smallWhen();
+    return this.#matches(when);
+  });
+  get isMatch() {
+    return this.#when();
+  }
+  get isSmallLayout() {
+    return this.#smallWhen();
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    this.setAttributes({
+      "data-match": this.#when,
+      "data-sm": () => this.#smallWhen() ? "" : null,
+      "data-lg": () => !this.#smallWhen() ? "" : null,
+      "data-size": () => this.#smallWhen() ? "sm" : "lg",
+      "data-no-scrub-gesture": this.$props.noScrubGesture
+    });
+    provideContext(defaultLayoutContext, {
+      ...this.$props,
+      when: this.#when,
+      smallWhen: this.#smallWhen,
+      userPrefersAnnouncements: signal(true),
+      userPrefersKeyboardAnimations: signal(true),
+      menuPortal: signal(null)
+    });
+  }
+  onAttach(el) {
+    watchColorScheme(el, this.$props.colorScheme);
+  }
+  #matches(query) {
+    return query !== "never" && (isBoolean(query) ? query : computed(() => query(this.#media.player.state))());
+  }
+}
+const defaultlayout__proto = DefaultLayout.prototype;
+prop(defaultlayout__proto, "isMatch");
+prop(defaultlayout__proto, "isSmallLayout");
+
+let DefaultAudioLayout$1 = class DefaultAudioLayout extends DefaultLayout {
+  static props = {
+    ...super.props,
+    when: ({ viewType }) => viewType === "audio",
+    smallWhen: ({ width }) => width < 576
+  };
+};
+
+function setLayoutName(name, isMatch) {
+  effect(() => {
+    const { player } = useMediaContext(), el = player.el;
+    el && setAttribute(el, "data-layout", isMatch() && name);
+    return () => el?.removeAttribute("data-layout");
+  });
+}
+
+function i18n(translations, word) {
+  return translations()?.[word] ?? word;
+}
+
+function DefaultAnnouncer() {
+  return $signal(() => {
+    const { translations, userPrefersAnnouncements } = useDefaultLayoutContext();
+    if (!userPrefersAnnouncements()) return null;
+    return html`<media-announcer .translations=${$signal(translations)}></media-announcer>`;
+  });
+}
+
+function IconSlot(name, classes = "") {
+  return html`<slot
+    name=${`${name}-icon`}
+    data-class=${`vds-icon vds-${name}-icon${classes ? ` ${classes}` : ""}`}
+  ></slot>`;
+}
+function IconSlots(names) {
+  return names.map((name) => IconSlot(name));
+}
+
+function $i18n(translations, word) {
+  return $signal(() => i18n(translations, word));
+}
+
+function DefaultAirPlayButton({ tooltip }) {
+  const { translations } = useDefaultLayoutContext(), { remotePlaybackState } = useMediaState(), $label = $signal(() => {
+    const airPlayText = i18n(translations, "AirPlay"), stateText = uppercaseFirstChar(remotePlaybackState());
+    return `${airPlayText} ${stateText}`;
+  }), $airPlayText = $i18n(translations, "AirPlay");
+  return html`
+    <media-tooltip class="vds-airplay-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-airplay-button class="vds-airplay-button vds-button" aria-label=${$label}>
+          ${IconSlot("airplay")}
+        </media-airplay-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-airplay-tooltip-text">${$airPlayText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+function DefaultPlayButton({ tooltip }) {
+  const { translations } = useDefaultLayoutContext(), $playText = $i18n(translations, "Play"), $pauseText = $i18n(translations, "Pause");
+  return html`
+    <media-tooltip class="vds-play-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-play-button
+          class="vds-play-button vds-button"
+          aria-label=${$i18n(translations, "Play")}
+        >
+          ${IconSlots(["play", "pause", "replay"])}
+        </media-play-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-play-tooltip-text">${$playText}</span>
+        <span class="vds-pause-tooltip-text">${$pauseText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+function DefaultMuteButton({
+  tooltip,
+  ref: ref$1 = noop
+}) {
+  const { translations } = useDefaultLayoutContext(), $muteText = $i18n(translations, "Mute"), $unmuteText = $i18n(translations, "Unmute");
+  return html`
+    <media-tooltip class="vds-mute-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-mute-button
+          class="vds-mute-button vds-button"
+          aria-label=${$i18n(translations, "Mute")}
+          ${ref(ref$1)}
+        >
+          ${IconSlots(["mute", "volume-low", "volume-high"])}
+        </media-mute-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-mute-tooltip-text">${$unmuteText}</span>
+        <span class="vds-unmute-tooltip-text">${$muteText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+function DefaultCaptionButton({ tooltip }) {
+  const { translations } = useDefaultLayoutContext(), $ccOnText = $i18n(translations, "Closed-Captions On"), $ccOffText = $i18n(translations, "Closed-Captions Off");
+  return html`
+    <media-tooltip class="vds-caption-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-caption-button
+          class="vds-caption-button vds-button"
+          aria-label=${$i18n(translations, "Captions")}
+        >
+          ${IconSlots(["cc-on", "cc-off"])}
+        </media-caption-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-cc-on-tooltip-text">${$ccOffText}</span>
+        <span class="vds-cc-off-tooltip-text">${$ccOnText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+function DefaultPIPButton() {
+  const { translations } = useDefaultLayoutContext(), $enterText = $i18n(translations, "Enter PiP"), $exitText = $i18n(translations, "Exit PiP");
+  return html`
+    <media-tooltip class="vds-pip-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-pip-button
+          class="vds-pip-button vds-button"
+          aria-label=${$i18n(translations, "PiP")}
+        >
+          ${IconSlots(["pip-enter", "pip-exit"])}
+        </media-pip-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content">
+        <span class="vds-pip-enter-tooltip-text">${$enterText}</span>
+        <span class="vds-pip-exit-tooltip-text">${$exitText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+function DefaultFullscreenButton({ tooltip }) {
+  const { translations } = useDefaultLayoutContext(), $enterText = $i18n(translations, "Enter Fullscreen"), $exitText = $i18n(translations, "Exit Fullscreen");
+  return html`
+    <media-tooltip class="vds-fullscreen-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-fullscreen-button
+          class="vds-fullscreen-button vds-button"
+          aria-label=${$i18n(translations, "Fullscreen")}
+        >
+          ${IconSlots(["fs-enter", "fs-exit"])}
+        </media-fullscreen-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-fs-enter-tooltip-text">${$enterText}</span>
+        <span class="vds-fs-exit-tooltip-text">${$exitText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+function DefaultSeekButton({
+  backward,
+  tooltip
+}) {
+  const { translations, seekStep } = useDefaultLayoutContext(), seekText = !backward ? "Seek Forward" : "Seek Backward", $label = $i18n(translations, seekText), $seconds = () => (backward ? -1 : 1) * seekStep();
+  return html`
+    <media-tooltip class="vds-seek-tooltip vds-tooltip">
+      <media-tooltip-trigger>
+        <media-seek-button
+          class="vds-seek-button vds-button"
+          seconds=${$signal($seconds)}
+          aria-label=${$label}
+        >
+          ${!backward ? IconSlot("seek-forward") : IconSlot("seek-backward")}
+        </media-seek-button>
+      </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        ${$i18n(translations, seekText)}
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+function DefaultLiveButton() {
+  const { translations } = useDefaultLayoutContext(), { live } = useMediaState(), $label = $i18n(translations, "Skip To Live"), $liveText = $i18n(translations, "LIVE");
+  return live() ? html`
+        <media-live-button class="vds-live-button" aria-label=${$label}>
+          <span class="vds-live-button-text">${$liveText}</span>
+        </media-live-button>
+      ` : null;
+}
+function DefaultDownloadButton() {
+  return $signal(() => {
+    const { download, translations } = useDefaultLayoutContext(), $download = download();
+    if (isNil($download)) return null;
+    const { source, title } = useMediaState(), $src = source(), file = getDownloadFile({
+      title: title(),
+      src: $src,
+      download: $download
+    });
+    return isString(file?.url) ? html`
+          <media-tooltip class="vds-download-tooltip vds-tooltip">
+            <media-tooltip-trigger>
+              <a
+                role="button"
+                class="vds-download-button vds-button"
+                aria-label=${$i18n(translations, "Download")}
+                href=${appendParamsToURL(file.url, { download: file.name })}
+                download=${file.name}
+                target="_blank"
+              >
+                <slot name="download-icon" data-class="vds-icon" />
+              </a>
+            </media-tooltip-trigger>
+            <media-tooltip-content class="vds-tooltip-content" placement="top">
+              ${$i18n(translations, "Download")}
+            </media-tooltip-content>
+          </media-tooltip>
+        ` : null;
+  });
+}
+function DefaultEpisodeButton({ tooltip } = {}) {
+  const $label = "Episodes", $episodesText = "Episodes";
+  function openEpisodes(e) {
+    e.stopPropagation();
+    e.currentTarget?.dispatchEvent(
+      new CustomEvent("vds-episodes-open", { bubbles: true, composed: true })
+    );
+  }
+  const content = html`
+    <button
+      type="button"
+      class="vds-episode-button vds-button"
+      aria-label=${$label}
+      @pointerup=${openEpisodes}
+    >
+      ${IconSlot("menu-episodes")}
+    </button>
+  `;
+  if (!tooltip) return content;
+  return html`
+    <media-tooltip class="vds-episode-tooltip vds-tooltip">
+      <media-tooltip-trigger> ${content} </media-tooltip-trigger>
+      <media-tooltip-content class="vds-tooltip-content" placement=${tooltip}>
+        <span class="vds-episode-tooltip-text">${$episodesText}</span>
+      </media-tooltip-content>
+    </media-tooltip>
+  `;
+}
+
+function DefaultCaptions() {
+  const { translations } = useDefaultLayoutContext();
+  return html`
+    <media-captions
+      class="vds-captions"
+      .exampleText=${$i18n(translations, "Captions look like this")}
+    ></media-captions>
+  `;
+}
+
+function DefaultControlsSpacer() {
+  return html`<div class="vds-controls-spacer"></div>`;
+}
+
+function MenuPortal(container, template) {
+  return html`
+    <media-menu-portal .container=${$signal(container)} disabled="fullscreen">
+      ${template}
+    </media-menu-portal>
+  `;
+}
+function createMenuContainer(layoutEl, rootSelector, className, isSmallLayout) {
+  let root = isString(rootSelector) ? document.querySelector(rootSelector) : rootSelector;
+  if (!root) root = layoutEl?.closest("dialog");
+  if (!root) root = document.body;
+  const container = document.createElement("div");
+  container.style.display = "contents";
+  container.classList.add(className);
+  root.append(container);
+  effect(() => {
+    if (!container) return;
+    const { viewType } = useMediaState(), isSmall = isSmallLayout();
+    setAttribute(container, "data-view-type", viewType());
+    setAttribute(container, "data-sm", isSmall);
+    setAttribute(container, "data-lg", !isSmall);
+    setAttribute(container, "data-size", isSmall ? "sm" : "lg");
+  });
+  const { colorScheme } = useDefaultLayoutContext();
+  watchColorScheme(container, colorScheme);
+  return container;
+}
+
+function DefaultChaptersMenu({
+  placement,
+  tooltip,
+  portal
+}) {
+  const { textTracks } = useMediaContext(), { viewType, seekableStart, seekableEnd } = useMediaState(), {
+    translations,
+    thumbnails,
+    menuPortal,
+    noModal,
+    menuGroup,
+    smallWhen: smWhen
+  } = useDefaultLayoutContext(), $disabled = computed(() => {
+    const $startTime = seekableStart(), $endTime = seekableEnd(), $track = signal(null);
+    watchActiveTextTrack(textTracks, "chapters", $track.set);
+    const cues = $track()?.cues.filter(
+      (cue) => cue.startTime <= $endTime && cue.endTime >= $startTime
+    );
+    return !cues?.length;
+  });
+  if ($disabled()) return null;
+  const $placement = computed(
+    () => noModal() ? unwrap(placement) : !smWhen() ? unwrap(placement) : null
+  ), $offset = computed(
+    () => !smWhen() && menuGroup() === "bottom" && viewType() === "video" ? 26 : 0
+  ), $isOpen = signal(false);
+  function onOpen() {
+    $isOpen.set(true);
+  }
+  function onClose() {
+    $isOpen.set(false);
+  }
+  const items = html`
+    <media-menu-items
+      class="vds-chapters-menu-items vds-menu-items"
+      placement=${$signal($placement)}
+      offset=${$signal($offset)}
+    >
+      ${$signal(() => {
+    if (!$isOpen()) return null;
+    return html`
+          <media-chapters-radio-group
+            class="vds-chapters-radio-group vds-radio-group"
+            .thumbnails=${$signal(thumbnails)}
+          >
+            <template>
+              <media-radio class="vds-chapter-radio vds-radio">
+                <media-thumbnail class="vds-thumbnail"></media-thumbnail>
+                <div class="vds-chapter-radio-content">
+                  <span class="vds-chapter-radio-label" data-part="label"></span>
+                  <span class="vds-chapter-radio-start-time" data-part="start-time"></span>
+                  <span class="vds-chapter-radio-duration" data-part="duration"></span>
+                </div>
+              </media-radio>
+            </template>
+          </media-chapters-radio-group>
+        `;
+  })}
+    </media-menu-items>
+  `;
+  return html`
+    <media-menu class="vds-chapters-menu vds-menu" @open=${onOpen} @close=${onClose}>
+      <media-tooltip class="vds-tooltip">
+        <media-tooltip-trigger>
+          <media-menu-button
+            class="vds-menu-button vds-button"
+            aria-label=${$i18n(translations, "Chapters")}
+          >
+            ${IconSlot("menu-chapters")}
+          </media-menu-button>
+        </media-tooltip-trigger>
+        <media-tooltip-content
+          class="vds-tooltip-content"
+          placement=${isFunction(tooltip) ? $signal(tooltip) : tooltip}
+        >
+          ${$i18n(translations, "Chapters")}
+        </media-tooltip-content>
+      </media-tooltip>
+      ${MenuPortal(menuPortal, items) }
+    </media-menu>
+  `;
+}
+
+const FONT_COLOR_OPTION = {
+  type: "color"
+};
+const FONT_FAMILY_OPTION = {
+  type: "radio",
+  values: {
+    "Monospaced Serif": "mono-serif",
+    "Proportional Serif": "pro-serif",
+    "Monospaced Sans-Serif": "mono-sans",
+    "Proportional Sans-Serif": "pro-sans",
+    Casual: "casual",
+    Cursive: "cursive",
+    "Small Capitals": "capitals"
+  }
+};
+const FONT_SIZE_OPTION = {
+  type: "slider",
+  min: 0,
+  max: 400,
+  step: 25,
+  upIcon: null,
+  downIcon: null
+};
+const FONT_OPACITY_OPTION = {
+  type: "slider",
+  min: 0,
+  max: 100,
+  step: 5,
+  upIcon: null,
+  downIcon: null
+};
+const FONT_TEXT_SHADOW_OPTION = {
+  type: "radio",
+  values: ["None", "Drop Shadow", "Raised", "Depressed", "Outline"]
+};
+const FONT_DEFAULTS = {
+  fontFamily: "pro-sans",
+  fontSize: "100%",
+  textColor: "#ffffff",
+  textOpacity: "100%",
+  textShadow: "none",
+  textBg: "#000000",
+  textBgOpacity: "100%",
+  displayBg: "#000000",
+  displayBgOpacity: "0%"
+};
+const FONT_SIGNALS = Object.keys(FONT_DEFAULTS).reduce(
+  (prev, type) => ({
+    ...prev,
+    [type]: signal(FONT_DEFAULTS[type])
+  }),
+  {}
+);
+function onFontReset() {
+  for (const type of Object.keys(FONT_SIGNALS)) {
+    const defaultValue = FONT_DEFAULTS[type];
+    FONT_SIGNALS[type].set(defaultValue);
+  }
+}
+
+let sectionId = 0;
+function DefaultMenuSection({ label = "", value = "", children }) {
+  if (!label) {
+    return html`
+      <div class="vds-menu-section">
+        <div class="vds-menu-section-body">${children}</div>
+      </div>
+    `;
+  }
+  const id = `vds-menu-section-${++sectionId}`;
+  return html`
+    <section class="vds-menu-section" role="group" aria-labelledby=${id}>
+      <div class="vds-menu-section-title">
+        <header id=${id}>${label}</header>
+        ${value ? html`<div class="vds-menu-section-value">${value}</div>` : null}
+      </div>
+      <div class="vds-menu-section-body">${children}</div>
+    </section>
+  `;
+}
+function DefaultMenuItem({ label, children }) {
+  return html`
+    <div class="vds-menu-item">
+      <div class="vds-menu-item-label">${label}</div>
+      ${children}
+    </div>
+  `;
+}
+function DefaultMenuButton({
+  label,
+  icon,
+  hint
+}) {
+  return html`
+    <media-menu-button class="vds-menu-item">
+      ${IconSlot("menu-arrow-left", "vds-menu-close-icon")}
+      ${icon ? IconSlot(icon, "vds-menu-item-icon") : null}
+      <span class="vds-menu-item-label">${$signal(label)}</span>
+      <span class="vds-menu-item-hint" data-part="hint">${hint ? $signal(hint) : null} </span>
+      ${IconSlot("menu-arrow-right", "vds-menu-open-icon")}
+    </media-menu-button>
+  `;
+}
+function DefaultRadioGroup({
+  value = null,
+  options,
+  hideLabel = false,
+  children = null,
+  onChange = null
+}) {
+  function renderRadio(option) {
+    const { value: value2, label: content } = option;
+    return html`
+      <media-radio class="vds-radio" value=${value2}>
+        ${IconSlot("menu-radio-check")}
+        ${!hideLabel ? html`
+              <span class="vds-radio-label" data-part="label">
+                ${isString(content) ? content : $signal(content)}
+              </span>
+            ` : null}
+        ${isFunction(children) ? children(option) : children}
+      </media-radio>
+    `;
+  }
+  return html`
+    <media-radio-group
+      class="vds-radio-group"
+      value=${isString(value) ? value : value ? $signal(value) : ""}
+      @change=${onChange}
+    >
+      ${isArray(options) ? options.map(renderRadio) : $signal(() => options().map(renderRadio))}
+    </media-radio-group>
+  `;
+}
+function createRadioOptions(entries) {
+  return isArray(entries) ? entries.map((entry) => ({ label: entry, value: entry.toLowerCase() })) : Object.keys(entries).map((label) => ({ label, value: entries[label] }));
+}
+
+function DefaultSliderParts() {
+  return html`
+    <div class="vds-slider-track"></div>
+    <div class="vds-slider-track-fill vds-slider-track"></div>
+    <div class="vds-slider-thumb"></div>
+  `;
+}
+function DefaultSliderSteps() {
+  return html`
+    <media-slider-steps class="vds-slider-steps">
+      <template>
+        <div class="vds-slider-step"></div>
+      </template>
+    </media-slider-steps>
+  `;
+}
+function DefaultMenuSliderItem({
+  label = null,
+  value = null,
+  upIcon = "",
+  downIcon = "",
+  children,
+  isMin,
+  isMax
+}) {
+  const hasTitle = label || value, content = [
+    downIcon ? IconSlot(downIcon, "down") : null,
+    children,
+    upIcon ? IconSlot(upIcon, "up") : null
+  ];
+  return html`
+    <div
+      class=${`vds-menu-item vds-menu-slider-item${hasTitle ? " group" : ""}`}
+      data-min=${$signal(() => isMin() ? "" : null)}
+      data-max=${$signal(() => isMax() ? "" : null)}
+    >
+      ${hasTitle ? html`
+            <div class="vds-menu-slider-title">
+              ${[
+    label ? html`<div>${label}</div>` : null,
+    value ? html`<div>${value}</div>` : null
+  ]}
+            </div>
+            <div class="vds-menu-slider-body">${content}</div>
+          ` : content}
+    </div>
+  `;
+}
+
+const FONT_SIZE_OPTION_WITH_ICONS = {
+  ...FONT_SIZE_OPTION,
+  upIcon: "menu-opacity-up",
+  downIcon: "menu-opacity-down"
+};
+const FONT_OPACITY_OPTION_WITH_ICONS = {
+  ...FONT_OPACITY_OPTION,
+  upIcon: "menu-opacity-up",
+  downIcon: "menu-opacity-down"
+};
+function DefaultFontMenu() {
+  return $signal(() => {
+    const { hasCaptions } = useMediaState(), { translations } = useDefaultLayoutContext();
+    if (!hasCaptions()) return null;
+    return html`
+      <media-menu class="vds-font-menu vds-menu">
+        ${DefaultMenuButton({
+      label: () => i18n(translations, "Caption Styles")
+    })}
+        <media-menu-items class="vds-menu-items">
+          ${[
+      DefaultMenuSection({
+        label: $i18n(translations, "Font"),
+        children: [DefaultFontFamilyMenu(), DefaultFontSizeSlider()]
+      }),
+      DefaultMenuSection({
+        label: $i18n(translations, "Text"),
+        children: [
+          DefaultTextColorInput(),
+          DefaultTextShadowMenu(),
+          DefaultTextOpacitySlider()
+        ]
+      }),
+      DefaultMenuSection({
+        label: $i18n(translations, "Text Background"),
+        children: [DefaultTextBgInput(), DefaultTextBgOpacitySlider()]
+      }),
+      DefaultMenuSection({
+        label: $i18n(translations, "Display Background"),
+        children: [DefaultDisplayBgInput(), DefaultDisplayOpacitySlider()]
+      }),
+      DefaultMenuSection({
+        children: [DefaultResetMenuItem()]
+      })
+    ]}
+        </media-menu-items>
+      </media-menu>
+    `;
+  });
+}
+function DefaultFontFamilyMenu() {
+  return DefaultFontSetting({
+    label: "Family",
+    option: FONT_FAMILY_OPTION,
+    type: "fontFamily"
+  });
+}
+function DefaultFontSizeSlider() {
+  return DefaultFontSetting({
+    label: "Size",
+    option: FONT_SIZE_OPTION_WITH_ICONS,
+    type: "fontSize"
+  });
+}
+function DefaultTextColorInput() {
+  return DefaultFontSetting({
+    label: "Color",
+    option: FONT_COLOR_OPTION,
+    type: "textColor"
+  });
+}
+function DefaultTextOpacitySlider() {
+  return DefaultFontSetting({
+    label: "Opacity",
+    option: FONT_OPACITY_OPTION_WITH_ICONS,
+    type: "textOpacity"
+  });
+}
+function DefaultTextShadowMenu() {
+  return DefaultFontSetting({
+    label: "Shadow",
+    option: FONT_TEXT_SHADOW_OPTION,
+    type: "textShadow"
+  });
+}
+function DefaultTextBgInput() {
+  return DefaultFontSetting({
+    label: "Color",
+    option: FONT_COLOR_OPTION,
+    type: "textBg"
+  });
+}
+function DefaultTextBgOpacitySlider() {
+  return DefaultFontSetting({
+    label: "Opacity",
+    option: FONT_OPACITY_OPTION_WITH_ICONS,
+    type: "textBgOpacity"
+  });
+}
+function DefaultDisplayBgInput() {
+  return DefaultFontSetting({
+    label: "Color",
+    option: FONT_COLOR_OPTION,
+    type: "displayBg"
+  });
+}
+function DefaultDisplayOpacitySlider() {
+  return DefaultFontSetting({
+    label: "Opacity",
+    option: FONT_OPACITY_OPTION_WITH_ICONS,
+    type: "displayBgOpacity"
+  });
+}
+function DefaultResetMenuItem() {
+  const { translations } = useDefaultLayoutContext(), $label = () => i18n(translations, "Reset");
+  return html`
+    <button class="vds-menu-item" role="menuitem" @click=${onFontReset}>
+      <span class="vds-menu-item-label">${$signal($label)}</span>
+    </button>
+  `;
+}
+function DefaultFontSetting({ label, option, type }) {
+  const { player } = useMediaContext(), { translations } = useDefaultLayoutContext(), $currentValue = FONT_SIGNALS[type], $label = () => i18n(translations, label);
+  function notify() {
+    tick();
+    player.dispatchEvent(new Event("vds-font-change"));
+  }
+  if (option.type === "color") {
+    let onColorChange2 = function(event) {
+      $currentValue.set(event.target.value);
+      notify();
+    };
+    return DefaultMenuItem({
+      label: $signal($label),
+      children: html`
+        <input
+          class="vds-color-picker"
+          type="color"
+          .value=${$signal($currentValue)}
+          @input=${onColorChange2}
+        />
+      `
+    });
+  }
+  if (option.type === "slider") {
+    let onSliderValueChange2 = function(event) {
+      $currentValue.set(event.detail + "%");
+      notify();
+    };
+    const { min, max, step, upIcon, downIcon } = option;
+    return DefaultMenuSliderItem({
+      label: $signal($label),
+      value: $signal($currentValue),
+      upIcon,
+      downIcon,
+      isMin: () => $currentValue() === min + "%",
+      isMax: () => $currentValue() === max + "%",
+      children: html`
+        <media-slider
+          class="vds-slider"
+          min=${min}
+          max=${max}
+          step=${step}
+          key-step=${step}
+          .value=${$signal(() => parseInt($currentValue()))}
+          aria-label=${$signal($label)}
+          @value-change=${onSliderValueChange2}
+          @drag-value-change=${onSliderValueChange2}
+        >
+          ${DefaultSliderParts()}${DefaultSliderSteps()}
+        </media-slider>
+      `
+    });
+  }
+  const radioOptions = createRadioOptions(option.values), $hint = () => {
+    const value = $currentValue(), label2 = radioOptions.find((radio) => radio.value === value)?.label || "";
+    return i18n(translations, isString(label2) ? label2 : label2());
+  };
+  return html`
+    <media-menu class=${`vds-${camelToKebabCase(type)}-menu vds-menu`}>
+      ${DefaultMenuButton({ label: $label, hint: $hint })}
+      <media-menu-items class="vds-menu-items">
+        ${DefaultRadioGroup({
+    value: $currentValue,
+    options: radioOptions,
+    onChange({ detail: value }) {
+      $currentValue.set(value);
+      notify();
+    }
+  })}
+      </media-menu-items>
+    </media-menu>
+  `;
+}
+
+function DefaultMenuCheckbox({
+  label,
+  checked,
+  defaultChecked = false,
+  storageKey,
+  onChange
+}) {
+  const { translations } = useDefaultLayoutContext(), savedValue = storageKey ? localStorage.getItem(storageKey) : null, $checked = signal(!!(savedValue ?? defaultChecked)), $active = signal(false), $ariaChecked = $signal($ariaBool($checked)), $label = $i18n(translations, label);
+  if (storageKey) onChange(peek($checked));
+  if (checked) {
+    effect(() => void $checked.set(checked()));
+  }
+  function onPress(event) {
+    if (event?.button === 1) return;
+    $checked.set((checked2) => !checked2);
+    if (storageKey) localStorage.setItem(storageKey, $checked() ? "1" : "");
+    onChange($checked(), event);
+    $active.set(false);
+  }
+  function onKeyDown(event) {
+    if (isKeyboardClick(event)) onPress();
+  }
+  function onActive(event) {
+    if (event.button !== 0) return;
+    $active.set(true);
+  }
+  return html`
+    <div
+      class="vds-menu-checkbox"
+      role="menuitemcheckbox"
+      tabindex="0"
+      aria-label=${$label}
+      aria-checked=${$ariaChecked}
+      data-active=${$signal(() => $active() ? "" : null)}
+      @pointerup=${onPress}
+      @pointerdown=${onActive}
+      @keydown=${onKeyDown}
+    ></div>
+  `;
+}
+
+function DefaultAccessibilityMenu() {
+  return $signal(() => {
+    const { translations } = useDefaultLayoutContext();
+    return html`
+      <media-menu class="vds-accessibility-menu vds-menu">
+        ${DefaultMenuButton({
+      label: () => i18n(translations, "Accessibility"),
+      icon: "menu-accessibility"
+    })}
+        <media-menu-items class="vds-menu-items">
+          ${[
+      DefaultMenuSection({
+        children: [
+          DefaultAnnouncementsMenuCheckbox(),
+          DefaultKeyboardAnimationsMenuCheckbox()
+        ]
+      }),
+      DefaultMenuSection({
+        children: [DefaultFontMenu()]
+      })
+    ]}
+        </media-menu-items>
+      </media-menu>
+    `;
+  });
+}
+function DefaultAnnouncementsMenuCheckbox() {
+  const { userPrefersAnnouncements, translations } = useDefaultLayoutContext(), label = "Announcements";
+  return DefaultMenuItem({
+    label: $i18n(translations, label),
+    children: DefaultMenuCheckbox({
+      label,
+      storageKey: "vds-player::announcements",
+      onChange(checked) {
+        userPrefersAnnouncements.set(checked);
+      }
+    })
+  });
+}
+function DefaultKeyboardAnimationsMenuCheckbox() {
+  return $signal(() => {
+    const { translations, userPrefersKeyboardAnimations, noKeyboardAnimations } = useDefaultLayoutContext(), { viewType } = useMediaState(), $disabled = computed(() => viewType() !== "video" || noKeyboardAnimations());
+    if ($disabled()) return null;
+    const label = "Keyboard Animations";
+    return DefaultMenuItem({
+      label: $i18n(translations, label),
+      children: DefaultMenuCheckbox({
+        label,
+        defaultChecked: true,
+        storageKey: "vds-player::keyboard-animations",
+        onChange(checked) {
+          userPrefersKeyboardAnimations.set(checked);
+        }
+      })
+    });
+  });
+}
+
+function DefaultAudioMenu() {
+  return $signal(() => {
+    const { noAudioGain, translations } = useDefaultLayoutContext(), { audioTracks, canSetAudioGain } = useMediaState(), $disabled = computed(() => {
+      const hasGainSlider = canSetAudioGain() && !noAudioGain();
+      return !hasGainSlider && audioTracks().length <= 1;
+    });
+    if ($disabled()) return null;
+    return html`
+      <media-menu class="vds-audio-menu vds-menu">
+        ${DefaultMenuButton({
+      label: () => i18n(translations, "Audio"),
+      icon: "menu-audio"
+    })}
+        <media-menu-items class="vds-menu-items">
+          ${[DefaultAudioTracksMenu(), DefaultAudioBoostSection()]}
+        </media-menu-items>
+      </media-menu>
+    `;
+  });
+}
+function DefaultAudioTracksMenu() {
+  return $signal(() => {
+    const { translations } = useDefaultLayoutContext(), { audioTracks } = useMediaState(), $defaultText = $i18n(translations, "Default"), $disabled = computed(() => audioTracks().length <= 1);
+    if ($disabled()) return null;
+    return DefaultMenuSection({
+      children: html`
+        <media-menu class="vds-audio-tracks-menu vds-menu">
+          ${DefaultMenuButton({
+        label: () => i18n(translations, "Track")
+      })}
+          <media-menu-items class="vds-menu-items">
+            <media-audio-radio-group
+              class="vds-audio-track-radio-group vds-radio-group"
+              empty-label=${$defaultText}
+            >
+              <template>
+                <media-radio class="vds-audio-track-radio vds-radio">
+                  <slot name="menu-radio-check-icon" data-class="vds-icon"></slot>
+                  <span class="vds-radio-label" data-part="label"></span>
+                </media-radio>
+              </template>
+            </media-audio-radio-group>
+          </media-menu-items>
+        </media-menu>
+      `
+    });
+  });
+}
+function DefaultAudioBoostSection() {
+  return $signal(() => {
+    const { noAudioGain, translations } = useDefaultLayoutContext(), { canSetAudioGain } = useMediaState(), $disabled = computed(() => !canSetAudioGain() || noAudioGain());
+    if ($disabled()) return null;
+    const { audioGain } = useMediaState();
+    return DefaultMenuSection({
+      label: $i18n(translations, "Boost"),
+      value: $signal(() => Math.round(((audioGain() ?? 1) - 1) * 100) + "%"),
+      children: [
+        DefaultMenuSliderItem({
+          upIcon: "menu-audio-boost-up",
+          downIcon: "menu-audio-boost-down",
+          children: DefaultAudioGainSlider(),
+          isMin: () => ((audioGain() ?? 1) - 1) * 100 <= getGainMin(),
+          isMax: () => ((audioGain() ?? 1) - 1) * 100 === getGainMax()
+        })
+      ]
+    });
+  });
+}
+function DefaultAudioGainSlider() {
+  const { translations } = useDefaultLayoutContext(), $label = $i18n(translations, "Boost"), $min = getGainMin, $max = getGainMax, $step = getGainStep;
+  return html`
+    <media-audio-gain-slider
+      class="vds-audio-gain-slider vds-slider"
+      aria-label=${$label}
+      min=${$signal($min)}
+      max=${$signal($max)}
+      step=${$signal($step)}
+      key-step=${$signal($step)}
+    >
+      ${DefaultSliderParts()}${DefaultSliderSteps()}
+    </media-audio-gain-slider>
+  `;
+}
+function getGainMin() {
+  const { audioGains } = useDefaultLayoutContext(), gains = audioGains();
+  return isArray(gains) ? gains[0] ?? 0 : gains.min;
+}
+function getGainMax() {
+  const { audioGains } = useDefaultLayoutContext(), gains = audioGains();
+  return isArray(gains) ? gains[gains.length - 1] ?? 300 : gains.max;
+}
+function getGainStep() {
+  const { audioGains } = useDefaultLayoutContext(), gains = audioGains();
+  return isArray(gains) ? gains[1] - gains[0] || 25 : gains.step;
+}
+
+function DefaultCaptionsMenu() {
+  return $signal(() => {
+    const { translations } = useDefaultLayoutContext(), { hasCaptions, textTracks } = useMediaState(), $offText = $i18n(translations, "Off");
+    if (!hasCaptions()) return null;
+    return html`
+      <media-menu class="vds-captions-menu vds-menu">
+        ${DefaultMenuButton({
+      label: () => i18n(translations, "Captions"),
+      icon: "menu-captions"
+    })}
+        <media-menu-items class="vds-menu-items">
+          <media-captions-radio-group
+            class="vds-captions-radio-group vds-radio-group"
+            off-label=${$offText}
+          >
+            <template>
+              <media-radio class="vds-caption-radio vds-radio">
+                <slot name="menu-radio-check-icon" data-class="vds-icon"></slot>
+                <span class="vds-caption-flag" data-part="flag"></span>
+                <span class="vds-radio-label" data-part="label"></span>
+              </media-radio>
+            </template>
+          </media-captions-radio-group>
+        </media-menu-items>
+      </media-menu>
+    `;
+  });
+}
+
+function DefaultPlaybackMenu() {
+  return $signal(() => {
+    const { translations } = useDefaultLayoutContext();
+    return html`
+      <media-menu class="vds-playback-menu vds-menu">
+        ${DefaultMenuButton({
+      label: () => i18n(translations, "Playback"),
+      icon: "menu-playback"
+    })}
+        <media-menu-items class="vds-menu-items">
+          ${[
+      DefaultMenuSection({
+        children: DefaultLoopCheckbox()
+      }),
+      DefaultSpeedMenuSection(),
+      DefaultQualityMenuSection()
+    ]}
+        </media-menu-items>
+      </media-menu>
+    `;
+  });
+}
+function DefaultLoopCheckbox() {
+  const { remote } = useMediaContext(), { translations } = useDefaultLayoutContext(), label = "Loop";
+  return DefaultMenuItem({
+    label: $i18n(translations, label),
+    children: DefaultMenuCheckbox({
+      label,
+      storageKey: "vds-player::user-loop",
+      onChange(checked, trigger) {
+        remote.userPrefersLoopChange(checked, trigger);
+      }
+    })
+  });
+}
+function DefaultSpeedMenuSection() {
+  return $signal(() => {
+    const { translations } = useDefaultLayoutContext(), { canSetPlaybackRate, playbackRate } = useMediaState();
+    if (!canSetPlaybackRate()) return null;
+    return DefaultMenuSection({
+      label: $i18n(translations, "Speed"),
+      value: $signal(
+        () => playbackRate() === 1 ? i18n(translations, "Normal") : playbackRate() + "x"
+      ),
+      children: [
+        DefaultMenuSliderItem({
+          upIcon: "menu-speed-up",
+          downIcon: "menu-speed-down",
+          children: DefaultSpeedSlider(),
+          isMin: () => playbackRate() === getSpeedMin(),
+          isMax: () => playbackRate() === getSpeedMax()
+        })
+      ]
+    });
+  });
+}
+function getSpeedMin() {
+  const { playbackRates } = useDefaultLayoutContext(), rates = playbackRates();
+  return isArray(rates) ? rates[0] ?? 0 : rates.min;
+}
+function getSpeedMax() {
+  const { playbackRates } = useDefaultLayoutContext(), rates = playbackRates();
+  return isArray(rates) ? rates[rates.length - 1] ?? 2 : rates.max;
+}
+function getSpeedStep() {
+  const { playbackRates } = useDefaultLayoutContext(), rates = playbackRates();
+  return isArray(rates) ? rates[1] - rates[0] || 0.25 : rates.step;
+}
+function DefaultSpeedSlider() {
+  const { translations } = useDefaultLayoutContext(), $label = $i18n(translations, "Speed"), $min = getSpeedMin, $max = getSpeedMax, $step = getSpeedStep;
+  return html`
+    <media-speed-slider
+      class="vds-speed-slider vds-slider"
+      aria-label=${$label}
+      min=${$signal($min)}
+      max=${$signal($max)}
+      step=${$signal($step)}
+      key-step=${$signal($step)}
+    >
+      ${DefaultSliderParts()}${DefaultSliderSteps()}
+    </media-speed-slider>
+  `;
+}
+function DefaultAutoQualityCheckbox() {
+  const { remote, qualities } = useMediaContext(), { autoQuality, canSetQuality, qualities: $qualities } = useMediaState(), { translations } = useDefaultLayoutContext(), label = "Auto", $disabled = computed(() => !canSetQuality() || $qualities().length <= 1);
+  if ($disabled()) return null;
+  return DefaultMenuItem({
+    label: $i18n(translations, label),
+    children: DefaultMenuCheckbox({
+      label,
+      checked: autoQuality,
+      onChange(checked, trigger) {
+        if (checked) {
+          remote.requestAutoQuality(trigger);
+        } else {
+          remote.changeQuality(qualities.selectedIndex, trigger);
+        }
+      }
+    })
+  });
+}
+function DefaultQualityMenuSection() {
+  return $signal(() => {
+    const { hideQualityBitrate, translations } = useDefaultLayoutContext(), { canSetQuality, qualities, quality } = useMediaState(), $disabled = computed(() => !canSetQuality() || qualities().length <= 1), $sortedQualities = computed(() => sortVideoQualities(qualities()));
+    if ($disabled()) return null;
+    return DefaultMenuSection({
+      label: $i18n(translations, "Quality"),
+      value: $signal(() => {
+        const height = quality()?.height, bitrate = !hideQualityBitrate() ? quality()?.bitrate : null, bitrateText = bitrate && bitrate > 0 ? `${(bitrate / 1e6).toFixed(2)} Mbps` : null, autoText = i18n(translations, "Auto");
+        return height ? `${height}p${bitrateText ? ` (${bitrateText})` : ""}` : autoText;
+      }),
+      children: [
+        DefaultMenuSliderItem({
+          upIcon: "menu-quality-up",
+          downIcon: "menu-quality-down",
+          children: DefaultQualitySlider(),
+          isMin: () => $sortedQualities()[0] === quality(),
+          isMax: () => $sortedQualities().at(-1) === quality()
+        }),
+        DefaultAutoQualityCheckbox()
+      ]
+    });
+  });
+}
+function DefaultQualitySlider() {
+  const { translations } = useDefaultLayoutContext(), $label = $i18n(translations, "Quality");
+  return html`
+    <media-quality-slider class="vds-quality-slider vds-slider" aria-label=${$label}>
+      ${DefaultSliderParts()}${DefaultSliderSteps()}
+    </media-quality-slider>
+  `;
+}
+
+function DefaultSettingsMenu({
+  placement,
+  portal,
+  tooltip
+}) {
+  return $signal(() => {
+    const { viewType } = useMediaState(), {
+      translations,
+      menuPortal,
+      noModal,
+      menuGroup,
+      smallWhen: smWhen
+    } = useDefaultLayoutContext(), $placement = computed(
+      () => noModal() ? unwrap(placement) : !smWhen() ? unwrap(placement) : null
+    ), $offset = computed(
+      () => !smWhen() && menuGroup() === "bottom" && viewType() === "video" ? 26 : 0
+    ), $isOpen = signal(false);
+    function onOpen() {
+      $isOpen.set(true);
+    }
+    function onClose() {
+      $isOpen.set(false);
+    }
+    const items = html`
+      <media-menu-items
+        class="vds-settings-menu-items vds-menu-items"
+        placement=${$signal($placement)}
+        offset=${$signal($offset)}
+      >
+        ${$signal(() => {
+      if (!$isOpen()) {
+        return null;
+      }
+      return [
+        DefaultPlaybackMenu(),
+        DefaultAccessibilityMenu(),
+        DefaultAudioMenu(),
+        DefaultCaptionsMenu()
+      ];
+    })}
+      </media-menu-items>
+    `;
+    return html`
+      <media-menu class="vds-settings-menu vds-menu" @open=${onOpen} @close=${onClose}>
+        <media-tooltip class="vds-tooltip">
+          <media-tooltip-trigger>
+            <media-menu-button
+              class="vds-menu-button vds-button"
+              aria-label=${$i18n(translations, "Settings")}
+            >
+              ${IconSlot("menu-settings", "vds-rotate-icon")}
+            </media-menu-button>
+          </media-tooltip-trigger>
+          <media-tooltip-content
+            class="vds-tooltip-content"
+            placement=${isFunction(tooltip) ? $signal(tooltip) : tooltip}
+          >
+            ${$i18n(translations, "Settings")}
+          </media-tooltip-content>
+        </media-tooltip>
+        ${MenuPortal(menuPortal, items) }
+      </media-menu>
+    `;
+  });
+}
+
+function DefaultVolumePopup({
+  orientation,
+  tooltip
+}) {
+  return $signal(() => {
+    const { pointer, muted, canSetVolume } = useMediaState();
+    if (pointer() === "coarse" && !muted()) return null;
+    if (!canSetVolume()) {
+      return DefaultMuteButton({ tooltip });
+    }
+    const $rootRef = signal(void 0), $isRootActive = useActive($rootRef);
+    return html`
+      <div class="vds-volume" ?data-active=${$signal($isRootActive)} ${ref($rootRef.set)}>
+        ${DefaultMuteButton({ tooltip })}
+        <div class="vds-volume-popup">${DefaultVolumeSlider({ orientation })}</div>
+      </div>
+    `;
+  });
+}
+function DefaultVolumeSlider({ orientation } = {}) {
+  const { translations } = useDefaultLayoutContext(), $label = $i18n(translations, "Volume");
+  return html`
+    <media-volume-slider
+      class="vds-volume-slider vds-slider"
+      aria-label=${$label}
+      orientation=${ifDefined(orientation)}
+    >
+      <div class="vds-slider-track"></div>
+      <div class="vds-slider-track-fill vds-slider-track"></div>
+      <media-slider-preview class="vds-slider-preview" no-clamp>
+        <media-slider-value class="vds-slider-value"></media-slider-value>
+      </media-slider-preview>
+      <div class="vds-slider-thumb"></div>
+    </media-volume-slider>
+  `;
+}
+function DefaultTimeSlider() {
+  const $ref = signal(void 0), $width = signal(0), {
+    thumbnails,
+    translations,
+    sliderChaptersMinWidth,
+    disableTimeSlider,
+    seekStep,
+    noScrubGesture
+  } = useDefaultLayoutContext(), $label = $i18n(translations, "Seek"), $isDisabled = $signal(disableTimeSlider), $isChaptersDisabled = $signal(() => $width() < sliderChaptersMinWidth()), $thumbnails = $signal(thumbnails);
+  useResizeObserver($ref, () => {
+    const el = $ref();
+    el && $width.set(el.clientWidth);
+  });
+  return html`
+    <media-time-slider
+      class="vds-time-slider vds-slider"
+      aria-label=${$label}
+      key-step=${$signal(seekStep)}
+      ?disabled=${$isDisabled}
+      ?no-swipe-gesture=${$signal(noScrubGesture)}
+      ${ref($ref.set)}
+    >
+      <media-slider-chapters class="vds-slider-chapters" ?disabled=${$isChaptersDisabled}>
+        <template>
+          <div class="vds-slider-chapter">
+            <div class="vds-slider-track"></div>
+            <div class="vds-slider-track-fill vds-slider-track"></div>
+            <div class="vds-slider-progress vds-slider-track"></div>
+          </div>
+        </template>
+      </media-slider-chapters>
+      <div class="vds-slider-thumb"></div>
+      <media-slider-preview class="vds-slider-preview">
+        <media-slider-thumbnail
+          class="vds-slider-thumbnail vds-thumbnail"
+          .src=${$thumbnails}
+        ></media-slider-thumbnail>
+        <div class="vds-slider-chapter-title" data-part="chapter-title"></div>
+        <media-slider-value class="vds-slider-value"></media-slider-value>
+      </media-slider-preview>
+    </media-time-slider>
+  `;
+}
+
+function DefaultTimeGroup() {
+  return html`
+    <div class="vds-time-group">
+      ${$signal(() => {
+    const { duration } = useMediaState();
+    if (!duration()) return null;
+    return [
+      html`<media-time class="vds-time" type="current"></media-time>`,
+      html`<div class="vds-time-divider">/</div>`,
+      html`<media-time class="vds-time" type="duration"></media-time>`
+    ];
+  })}
+    </div>
+  `;
+}
+function DefaultTimeInvert() {
+  return $signal(() => {
+    const { live, duration } = useMediaState();
+    return live() ? DefaultLiveButton() : duration() ? html`<media-time class="vds-time" type="current" toggle remainder></media-time>` : null;
+  });
+}
+function DefaultTimeInfo() {
+  return $signal(() => {
+    const { live } = useMediaState();
+    return live() ? DefaultLiveButton() : DefaultTimeGroup();
+  });
+}
+
+function DefaultTitle() {
+  return $signal(() => {
+    const { textTracks } = useMediaContext(), { title, started } = useMediaState(), $hasChapters = signal(null);
+    watchActiveTextTrack(textTracks, "chapters", $hasChapters.set);
+    return $hasChapters() && (started() || !title()) ? DefaultChapterTitle() : html`<media-title class="vds-chapter-title"></media-title>`;
+  });
+}
+function DefaultChapterTitle() {
+  return html`<media-chapter-title class="vds-chapter-title"></media-chapter-title>`;
+}
+
+function DefaultAudioLayout() {
+  return [
+    DefaultAnnouncer(),
+    DefaultCaptions(),
+    html`
+      <media-controls class="vds-controls">
+        <media-controls-group class="vds-controls-group">
+          ${[
+      DefaultSeekButton({ backward: true, tooltip: "top start" }),
+      DefaultPlayButton({ tooltip: "top" }),
+      DefaultSeekButton({ tooltip: "top" }),
+      DefaultAudioTitle(),
+      DefaultTimeSlider(),
+      DefaultTimeInvert(),
+      DefaultVolumePopup({ orientation: "vertical", tooltip: "top" }),
+      DefaultCaptionButton({ tooltip: "top" }),
+      DefaultDownloadButton(),
+      DefaultAirPlayButton({ tooltip: "top" }),
+      DefaultAudioMenus()
+    ]}
+        </media-controls-group>
+      </media-controls>
+    `
+  ];
+}
+function DefaultAudioTitle() {
+  return $signal(() => {
+    let $ref = signal(void 0), $isTextOverflowing = signal(false), media = useMediaContext(), { title, started, currentTime, ended } = useMediaState(), { translations } = useDefaultLayoutContext(), $isTransitionActive = useTransitionActive($ref), $isContinued = () => started() || currentTime() > 0;
+    const $title = () => {
+      const word = ended() ? "Replay" : $isContinued() ? "Continue" : "Play";
+      return `${i18n(translations, word)}: ${title()}`;
+    };
+    effect(() => {
+      if ($isTransitionActive() && document.activeElement === document.body) {
+        media.player.el?.focus({ preventScroll: true });
+      }
+    });
+    function onResize() {
+      const el = $ref(), isOverflowing = !!el && !$isTransitionActive() && el.clientWidth < el.children[0].clientWidth;
+      el && toggleClass(el, "vds-marquee", isOverflowing);
+      $isTextOverflowing.set(isOverflowing);
+    }
+    function Title() {
+      return html`
+        <span class="vds-title-text">
+          ${$signal($title)}${$signal(() => $isContinued() ? DefaultChapterTitle() : null)}
+        </span>
+      `;
+    }
+    useResizeObserver($ref, onResize);
+    return title() ? html`
+          <span class="vds-title" title=${$signal($title)} ${ref($ref.set)}>
+            ${[
+      Title(),
+      $signal(() => $isTextOverflowing() && !$isTransitionActive() ? Title() : null)
+    ]}
+          </span>
+        ` : DefaultControlsSpacer();
+  });
+}
+function DefaultAudioMenus() {
+  const placement = "top end";
+  return [
+    DefaultChaptersMenu({ tooltip: "top", placement, portal: true }),
+    DefaultSettingsMenu({ tooltip: "top end", placement, portal: true })
+  ];
+}
+
+class DefaultLayoutIconsLoader extends LayoutIconsLoader {
+  async loadIcons() {
+    const paths = (await import('./vidstack-P_QDjYIl.js')).icons, icons = {};
+    for (const iconName of Object.keys(paths)) {
+      icons[iconName] = Icon({ name: iconName, paths: paths[iconName] });
+    }
+    return icons;
+  }
+}
+
+class MediaAudioLayoutElement extends Host(LitElement, DefaultAudioLayout$1) {
+  static tagName = "media-audio-layout";
+  static attrs = {
+    smallWhen: {
+      converter(value) {
+        return value !== "never" && !!value;
+      }
+    }
+  };
+  #media;
+  #scrubbing = signal(false);
+  onSetup() {
+    this.forwardKeepAlive = false;
+    this.#media = useMediaContext();
+    this.classList.add("vds-audio-layout");
+    this.#setupWatchScrubbing();
+  }
+  onConnect() {
+    setLayoutName("audio", () => this.isMatch);
+    this.#setupMenuContainer();
+  }
+  render() {
+    return $signal(this.#render.bind(this));
+  }
+  #render() {
+    return this.isMatch ? DefaultAudioLayout() : null;
+  }
+  #setupMenuContainer() {
+    const { menuPortal } = useDefaultLayoutContext();
+    effect(() => {
+      if (!this.isMatch) return;
+      const container = createMenuContainer(
+        this,
+        this.menuContainer,
+        "vds-audio-layout",
+        () => this.isSmallLayout
+      ), roots = container ? [this, container] : [this];
+      const iconsManager = this.$props.customIcons() ? new SlotManager(roots) : new DefaultLayoutIconsLoader(roots);
+      iconsManager.connect();
+      menuPortal.set(container);
+      return () => {
+        container.remove();
+        menuPortal.set(null);
+      };
+    });
+  }
+  #setupWatchScrubbing() {
+    const { pointer } = this.#media.$state;
+    effect(() => {
+      if (pointer() !== "coarse") return;
+      effect(this.#watchScrubbing.bind(this));
+    });
+  }
+  #watchScrubbing() {
+    if (!this.#scrubbing()) {
+      listenEvent(this, "pointerdown", this.#onStartScrubbing.bind(this));
+      return;
+    }
+    listenEvent(window, "pointerdown", this.#onStopScrubbing.bind(this));
+  }
+  #onStartScrubbing(event) {
+    const { target } = event, hasTimeSlider = !!(isHTMLElement(target) && target.closest(".vds-time-slider"));
+    if (!hasTimeSlider) return;
+    event.stopImmediatePropagation();
+    this.setAttribute("data-scrubbing", "");
+    this.#scrubbing.set(true);
+  }
+  #onStopScrubbing() {
+    this.#scrubbing.set(false);
+    this.removeAttribute("data-scrubbing");
+  }
+}
+
+class DefaultVideoLayout extends DefaultLayout {
+  static props = {
+    ...super.props,
+    when: ({ viewType }) => viewType === "video",
+    smallWhen: ({ width, height }) => width < 576 || height < 380
+  };
+}
+
+function DefaultKeyboardDisplay() {
+  return $signal(() => {
+    const media = useMediaContext(), { noKeyboardAnimations, userPrefersKeyboardAnimations } = useDefaultLayoutContext(), $disabled = computed(() => noKeyboardAnimations() || !userPrefersKeyboardAnimations());
+    if ($disabled()) {
+      return null;
+    }
+    const visible = signal(false), { lastKeyboardAction } = media.$state;
+    effect(() => {
+      visible.set(!!lastKeyboardAction());
+      const id = setTimeout(() => visible.set(false), 500);
+      return () => {
+        visible.set(false);
+        window.clearTimeout(id);
+      };
+    });
+    const $actionDataAttr = computed(() => {
+      const action = lastKeyboardAction()?.action;
+      return action && visible() ? camelToKebabCase(action) : null;
+    });
+    const $classList = computed(() => `vds-kb-action${!visible() ? " hidden" : ""}`), $text = computed(getText), $iconSlot = computed(() => {
+      const name = getIconName();
+      return name ? createSlot(name) : null;
+    });
+    function Icon() {
+      const $slot = $iconSlot();
+      if (!$slot) return null;
+      return html`
+        <div class="vds-kb-bezel">
+          <div class="vds-kb-icon">${$slot}</div>
+        </div>
+      `;
+    }
+    return html`
+      <div class=${$signal($classList)} data-action=${$signal($actionDataAttr)}>
+        <div class="vds-kb-text-wrapper">
+          <div class="vds-kb-text">${$signal($text)}</div>
+        </div>
+        ${$signal(() => keyed(lastKeyboardAction(), Icon()))}
+      </div>
+    `;
+  });
+}
+function getText() {
+  const { $state } = useMediaContext(), action = $state.lastKeyboardAction()?.action, audioGain = $state.audioGain() ?? 1;
+  switch (action) {
+    case "toggleMuted":
+      return $state.muted() ? "0%" : getVolumeText($state.volume(), audioGain);
+    case "volumeUp":
+    case "volumeDown":
+      return getVolumeText($state.volume(), audioGain);
+    default:
+      return "";
+  }
+}
+function getVolumeText(volume, gain) {
+  return `${Math.round(volume * gain * 100)}%`;
+}
+function getIconName() {
+  const { $state } = useMediaContext(), action = $state.lastKeyboardAction()?.action;
+  switch (action) {
+    case "togglePaused":
+      return !$state.paused() ? "kb-play-icon" : "kb-pause-icon";
+    case "toggleMuted":
+      return $state.muted() || $state.volume() === 0 ? "kb-mute-icon" : $state.volume() >= 0.5 ? "kb-volume-up-icon" : "kb-volume-down-icon";
+    case "toggleFullscreen":
+      return `kb-fs-${$state.fullscreen() ? "enter" : "exit"}-icon`;
+    case "togglePictureInPicture":
+      return `kb-pip-${$state.pictureInPicture() ? "enter" : "exit"}-icon`;
+    case "toggleCaptions":
+      return $state.hasCaptions() ? `kb-cc-${$state.textTrack() ? "on" : "off"}-icon` : null;
+    case "volumeUp":
+      return "kb-volume-up-icon";
+    case "volumeDown":
+      return "kb-volume-down-icon";
+    case "seekForward":
+      return "kb-seek-forward-icon";
+    case "seekBackward":
+      return "kb-seek-backward-icon";
+    default:
+      return null;
+  }
+}
+
+function DefaultVideoLayoutLarge() {
+  const { episodes, smallWhen: smWhen } = useDefaultLayoutContext(), { fullscreen } = useMediaState(), $episodesOpen = signal(false);
+  effect(() => {
+    if (!fullscreen()) $episodesOpen.set(false);
+  });
+  function onEpisodesToggle() {
+    if (!fullscreen() && !smWhen() || !episodes()?.length) return;
+    $episodesOpen.set(!$episodesOpen());
+  }
+  function onEpisodesClose() {
+    $episodesOpen.set(false);
+  }
+  return [
+    DefaultAnnouncer(),
+    DefaultVideoGestures(),
+    DefaultBufferingIndicator(),
+    DefaultKeyboardDisplay(),
+    DefaultCaptions(),
+    html`<div class="vds-scrim"></div>`,
+    html`
+      <media-controls class="vds-controls" @vds-episodes-open=${onEpisodesToggle}>
+        ${[
+      DefaultControlsGroupTop(),
+      DefaultControlsSpacer(),
+      html`
+            <media-controls-group class="vds-controls-group">
+              ${DefaultTimeSlider()}
+            </media-controls-group>
+          `,
+      html`
+            <media-controls-group class="vds-controls-group vds-controls-group-bottom">
+              ${[
+        DefaultSeekButton({ backward: true, tooltip: "top" }),
+        DefaultPlayButton({ tooltip: "top start" }),
+        DefaultSeekButton({ backward: false, tooltip: "top" }),
+        DefaultVolumePopup({ orientation: "horizontal", tooltip: "top" }),
+        DefaultTimeInfo(),
+        DefaultTitle(),
+        DefaultControlsSpacer(),
+        $signal(
+          () => (fullscreen() || smWhen()) && episodes()?.length ? DefaultEpisodeButton({ tooltip: "top" }) : null
+        ),
+        DefaultCaptionButton({ tooltip: "top" }),
+        DefaultBottomMenuGroup(),
+        DefaultDownloadButton(),
+        DefaultPIPButton(),
+        DefaultFullscreenButton({ tooltip: "top end" })
+      ]}
+            </media-controls-group>
+          `
+    ]}
+      </media-controls>
+    `,
+    DefaultEpisodesSidebar($episodesOpen, onEpisodesClose)
+  ];
+}
+function DefaultBottomMenuGroup() {
+  return $signal(() => {
+    const { menuGroup } = useDefaultLayoutContext();
+    return menuGroup() === "bottom" ? DefaultVideoMenus() : null;
+  });
+}
+function DefaultControlsGroupTop() {
+  return html`
+    <media-controls-group class="vds-controls-group">
+      ${$signal(() => {
+    const { menuGroup } = useDefaultLayoutContext();
+    return menuGroup() === "top" ? [DefaultControlsSpacer(), DefaultVideoMenus()] : null;
+  })}
+    </media-controls-group>
+  `;
+}
+function DefaultVideoLayoutSmall() {
+  const { episodes, smallWhen: smWhen } = useDefaultLayoutContext(), { fullscreen } = useMediaState(), $episodesOpen = signal(false);
+  effect(() => {
+    if (!fullscreen()) $episodesOpen.set(false);
+  });
+  function onEpisodesToggle() {
+    if (!fullscreen() && !smWhen() || !episodes()?.length) return;
+    $episodesOpen.set(!$episodesOpen());
+  }
+  function onEpisodesClose() {
+    $episodesOpen.set(false);
+  }
+  return [
+    DefaultAnnouncer(),
+    DefaultVideoGestures(),
+    DefaultBufferingIndicator(),
+    DefaultCaptions(),
+    DefaultKeyboardDisplay(),
+    html`<div class="vds-scrim"></div>`,
+    html`
+      <media-controls class="vds-controls" @vds-episodes-open=${onEpisodesToggle}>
+        <media-controls-group class="vds-controls-group">
+          ${[
+      DefaultControlsSpacer(),
+      DefaultCaptionButton({ tooltip: "bottom" }),
+      DefaultDownloadButton(),
+      DefaultVideoMenus(),
+      DefaultVolumePopup({ orientation: "vertical", tooltip: "bottom end" })
+    ]}
+        </media-controls-group>
+
+        ${DefaultControlsSpacer()}
+
+        <media-controls-group class="vds-controls-group">
+          ${DefaultTimeSlider()}
+        </media-controls-group>
+
+        <media-controls-group class="vds-controls-group vds-controls-group-bottom">
+          ${[
+      DefaultSeekButton({ backward: true, tooltip: "top" }),
+      DefaultPlayButton({ tooltip: "top" }),
+      DefaultSeekButton({ backward: false, tooltip: "top" }),
+      DefaultTimeInfo(),
+      DefaultControlsSpacer(),
+      $signal(
+        () => (fullscreen() || smWhen()) && episodes()?.length ? DefaultEpisodeButton({ tooltip: "top" }) : null
+      ),
+      DefaultFullscreenButton({ tooltip: "top end" })
+    ]}
+        </media-controls-group>
+      </media-controls>
+    `,
+    StartDuration(),
+    DefaultEpisodesSidebar($episodesOpen, onEpisodesClose)
+  ];
+}
+function DefaultVideoLoadLayout() {
+  return html`
+    <div class="vds-load-container">
+      ${[DefaultBufferingIndicator(), DefaultPlayButton({ tooltip: "top" })]}
+    </div>
+  `;
+}
+function StartDuration() {
+  return $signal(() => {
+    const { duration } = useMediaState();
+    if (duration() === 0) return null;
+    return html`
+      <div class="vds-start-duration">
+        <media-time class="vds-time" type="duration"></media-time>
+      </div>
+    `;
+  });
+}
+function DefaultBufferingIndicator() {
+  return html`
+    <div class="vds-buffering-indicator">
+      <media-spinner class="vds-buffering-spinner"></media-spinner>
+    </div>
+  `;
+}
+function formatMinutesLeftLabel(secondsLeft) {
+  if (secondsLeft <= 0) return null;
+  if (secondsLeft < 60) return "<1m left";
+  return `${Math.floor(secondsLeft / 60)}m left`;
+}
+function DefaultEpisodesSidebar($open, onClose) {
+  const { episodes, episodesTitle, smallWhen: smWhen } = useDefaultLayoutContext(), { fullscreen, currentTime, duration } = useMediaState();
+  return $signal(() => {
+    const list = episodes() ?? [];
+    if (!fullscreen() && !smWhen() || !list.length) return null;
+    const ct = currentTime(), dur = duration();
+    return html`
+      <div
+        class="vds-episodes-backdrop"
+        data-open=${$open() ? "true" : "false"}
+        @pointerup=${(event) => {
+      if (event.target === event.currentTarget) onClose();
+    }}
+      >
+        <aside
+          class="vds-episodes-panel"
+          data-open=${$open() ? "true" : "false"}
+          @keydown=${(event) => {
+      if (event.key === "Escape") onClose();
+    }}
+        >
+          <header class="vds-episodes-panel-header">
+            <h3 class="vds-episodes-panel-title">${episodesTitle()}</h3>
+            <button
+              type="button"
+              class="vds-episodes-close-btn"
+              aria-label="Close episodes"
+              @pointerup=${(event) => {
+      event.stopPropagation();
+      onClose();
+    }}
+            >
+              <span aria-hidden="true">✕</span>
+            </button>
+          </header>
+          <div class="vds-episodes-list" role="list">
+            ${list.map((episode, index) => {
+      const episodeName = episode.episodeTitle || `Episode ${episode.episodeNumber ?? index + 1}`, seasonEpLabel = episode.seasonNumber != null && episode.episodeNumber != null ? `S${String(episode.seasonNumber).padStart(2, "0")} \xB7 E${String(
+        episode.episodeNumber
+      ).padStart(2, "0")}` : episodeName, isActive = episode.isActive === true;
+      let runtimeText = null;
+      if (isActive && dur > 0) {
+        const secsLeft = Math.max(0, dur - ct);
+        runtimeText = formatMinutesLeftLabel(secsLeft);
+      } else if (episode.timeLeft != null && episode.timeLeft > 0) {
+        runtimeText = `${episode.timeLeft}m left`;
+      } else if (Number.isFinite(episode.runtime) && (episode.runtime ?? 0) > 0) {
+        runtimeText = `${episode.runtime}m`;
+      }
+      let progressPct = 0;
+      if (isActive && dur > 0) {
+        progressPct = Math.min(100, ct / dur * 100);
+      } else if (episode.progressPercent != null && episode.progressPercent > 0) {
+        progressPct = Math.min(100, episode.progressPercent);
+      }
+      const showSubtitle = !!episode.episodeTitle && episode.episodeTitle.trim() !== "" && episode.episodeTitle !== episode.title;
+      const onEpisodeSelect = (event) => {
+        event.stopPropagation();
+        if (isActive) return;
+        event.currentTarget?.dispatchEvent(
+          new CustomEvent("vds-episode-select", {
+            bubbles: true,
+            composed: true,
+            detail: { episode, index }
+          })
+        );
+        onClose();
+      };
+      return html`
+                <article
+                  class="vds-episode-item"
+                  data-active=${isActive ? "true" : "false"}
+                  aria-current=${isActive ? "true" : void 0}
+                  role="button"
+                  tabindex="0"
+                  aria-label=${episode.title || episodeName}
+                  @pointerup=${onEpisodeSelect}
+                  @keydown=${(event) => {
+        if (event.key === "Enter" || event.key === " ") onEpisodeSelect(event);
+      }}
+                >
+                  <div class="vds-episode-thumb-wrap">
+                    ${episode.thumbnail ? html`
+                          <img
+                            class="vds-episode-thumb"
+                            src=${episode.thumbnail}
+                            alt=${episode.title || episodeName}
+                            loading="lazy"
+                            decoding="async"
+                          />
+                        ` : html`<div class="vds-episode-thumb vds-episode-thumb-placeholder"></div>`}
+                    ${isActive ? html`
+                          <div class="vds-episode-active-overlay" aria-hidden="true">
+                            <span class="vds-episode-playing-badge">Now playing</span>
+                          </div>
+                        ` : null}
+                    ${progressPct > 0 ? html`
+                          <div class="vds-episode-progress-track" aria-hidden="true">
+                            <div
+                              class="vds-episode-progress-fill"
+                              style=${`width: ${progressPct}%;`}
+                            ></div>
+                          </div>
+                        ` : null}
+                  </div>
+                  <div class="vds-episode-body">
+                    <div class="vds-episode-meta-row">
+                      <span class="vds-episode-label">${seasonEpLabel}</span>
+                      ${runtimeText ? html`<span class="vds-episode-runtime">${runtimeText}</span>` : null}
+                    </div>
+                    <h4 class="vds-episode-title" title=${episode.title || ""}>
+                      ${episode.title || "-"}
+                    </h4>
+                    ${showSubtitle ? html`<p class="vds-episode-subtitle" title=${episode.episodeTitle}>
+                          ${episode.episodeTitle}
+                        </p>` : null}
+                    ${episode.overview ? html`<p class="vds-episode-desc" title=${episode.overview}>
+                          ${episode.overview}
+                        </p>` : null}
+                  </div>
+                </article>
+              `;
+    })}
+          </div>
+        </aside>
+      </div>
+    `;
+  });
+}
+function DefaultVideoMenus() {
+  const { menuGroup, smallWhen: smWhen } = useDefaultLayoutContext(), $side = () => menuGroup() === "top" || smWhen() ? "bottom" : "top", $tooltip = computed(() => `${$side()} ${menuGroup() === "top" ? "end" : "center"}`), $placement = computed(() => `${$side()} end`);
+  return [
+    DefaultChaptersMenu({ tooltip: $tooltip, placement: $placement, portal: true }),
+    DefaultSettingsMenu({ tooltip: $tooltip, placement: $placement, portal: true })
+  ];
+}
+function DefaultVideoGestures() {
+  return $signal(() => {
+    const { noGestures } = useDefaultLayoutContext();
+    if (noGestures()) return null;
+    return html`
+      <div class="vds-gestures">
+        <media-gesture class="vds-gesture" event="pointerup" action="toggle:paused"></media-gesture>
+        <media-gesture
+          class="vds-gesture"
+          event="pointerup"
+          action="toggle:controls"
+        ></media-gesture>
+        <media-gesture
+          class="vds-gesture"
+          event="dblpointerup"
+          action="toggle:fullscreen"
+        ></media-gesture>
+        <media-gesture class="vds-gesture" event="dblpointerup" action="seek:-10"></media-gesture>
+        <media-gesture class="vds-gesture" event="dblpointerup" action="seek:10"></media-gesture>
+      </div>
+    `;
+  });
+}
+
+class MediaVideoLayoutElement extends Host(LitElement, DefaultVideoLayout) {
+  static tagName = "media-video-layout";
+  static attrs = {
+    smallWhen: {
+      converter(value) {
+        return value !== "never" && !!value;
+      }
+    },
+    episodes: {
+      converter(value) {
+        if (!value) return null;
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed) ? parsed : null;
+        } catch {
+          return null;
+        }
+      }
+    }
+  };
+  #media;
+  onSetup() {
+    this.forwardKeepAlive = false;
+    this.#media = useMediaContext();
+    this.classList.add("vds-video-layout");
+  }
+  onConnect() {
+    setLayoutName("video", () => this.isMatch);
+    this.#setupMenuContainer();
+  }
+  render() {
+    return $signal(this.#render.bind(this));
+  }
+  #setupMenuContainer() {
+    const { menuPortal } = useDefaultLayoutContext();
+    effect(() => {
+      if (!this.isMatch) return;
+      const container = createMenuContainer(
+        this,
+        this.menuContainer,
+        "vds-video-layout",
+        () => this.isSmallLayout
+      ), roots = container ? [this, container] : [this];
+      const iconsManager = this.$props.customIcons() ? new SlotManager(roots) : new DefaultLayoutIconsLoader(roots);
+      iconsManager.connect();
+      menuPortal.set(container);
+      return () => {
+        container.remove();
+        menuPortal.set(null);
+      };
+    });
+  }
+  #render() {
+    const { load } = this.#media.$props, { canLoad, streamType, nativeControls } = this.#media.$state;
+    return !nativeControls() && this.isMatch ? load() === "play" && !canLoad() ? DefaultVideoLoadLayout() : streamType() === "unknown" ? DefaultBufferingIndicator() : this.isSmallLayout ? DefaultVideoLayoutSmall() : DefaultVideoLayoutLarge() : null;
+  }
+}
+
+export { MediaAudioLayoutElement, MediaVideoLayoutElement };