@hanifhan1f/vidstack 1.12.13

package/src/elements/bundles/cdn/player.ts

@@ -0,0 +1,8 @@
+import '../player';
+import '../player-layouts/default';
+import '../player-ui';
+import '../icons';
+import '../../../global/player';
+
+export * from '../../../exports/core';
+export * from '../../../global/player';

package/src/elements/bundles/cdn/plyr.ts

@@ -0,0 +1,6 @@
+import '../player';
+import '../player-layouts/plyr';
+import '../../../global/plyr';
+
+export * from '../../../exports/core';
+export * from '../../../global/plyr';

package/src/elements/bundles/cdn-legacy/player-with-default.ts

@@ -0,0 +1,4 @@
+import '../player';
+import '../player-layouts';
+import '../player-ui';
+import '../icons';

package/src/elements/bundles/cdn-legacy/player-with-layouts.ts

@@ -0,0 +1,4 @@
+import '../player';
+import '../player-layouts';
+import '../player-ui';
+import '../icons';

package/src/elements/bundles/cdn-legacy/player-with-plyr.ts

@@ -0,0 +1,3 @@
+import '../player';
+import '../player-layouts/plyr';
+import '../icons';

package/src/elements/bundles/cdn-legacy/player.ts

@@ -0,0 +1,3 @@
+import '../player';
+import '../player-ui';
+import '../icons';

package/src/elements/bundles/icons.ts

@@ -0,0 +1,3 @@
+import 'media-icons/element';
+
+export type { IconType } from 'media-icons';

package/src/elements/bundles/player-layouts/default.ts

@@ -0,0 +1,7 @@
+import { defineCustomElement } from 'maverick.js/element';
+
+import { MediaAudioLayoutElement } from '../../define/layouts/default/audio-layout-element';
+import { MediaVideoLayoutElement } from '../../define/layouts/default/video-layout-element';
+
+defineCustomElement(MediaAudioLayoutElement);
+defineCustomElement(MediaVideoLayoutElement);

package/src/elements/bundles/player-layouts/index.ts

@@ -0,0 +1,9 @@
+import { defineCustomElement } from 'maverick.js/element';
+
+import { MediaAudioLayoutElement } from '../../define/layouts/default/audio-layout-element';
+import { MediaVideoLayoutElement } from '../../define/layouts/default/video-layout-element';
+import { MediaPlyrLayoutElement } from '../../define/layouts/plyr/plyr-layout-element';
+
+defineCustomElement(MediaAudioLayoutElement);
+defineCustomElement(MediaVideoLayoutElement);
+defineCustomElement(MediaPlyrLayoutElement);

package/src/elements/bundles/player-layouts/plyr.ts

@@ -0,0 +1,65 @@
+import { defineCustomElement } from 'maverick.js/element';
+
+import { MediaAirPlayButtonElement } from '../../define/buttons/airplay-button-element';
+import { MediaCaptionButtonElement } from '../../define/buttons/caption-button-element';
+import { MediaFullscreenButtonElement } from '../../define/buttons/fullscreen-button-element';
+import { MediaLiveButtonElement } from '../../define/buttons/live-button-element';
+import { MediaMuteButtonElement } from '../../define/buttons/mute-button-element';
+import { MediaPIPButtonElement } from '../../define/buttons/pip-button-element';
+import { MediaPlayButtonElement } from '../../define/buttons/play-button-element';
+import { MediaSeekButtonElement } from '../../define/buttons/seek-button-element';
+import { MediaPlyrLayoutElement } from '../../define/layouts/plyr/plyr-layout-element';
+import { MediaAudioRadioGroupElement } from '../../define/menus/audio-radio-group-element';
+import { MediaCaptionsRadioGroupElement } from '../../define/menus/captions-radio-group-element';
+import { MediaMenuButtonElement } from '../../define/menus/menu-button-element';
+import { MediaMenuElement } from '../../define/menus/menu-element';
+import { MediaMenuItemElement } from '../../define/menus/menu-item-element';
+import { MediaMenuItemsElement } from '../../define/menus/menu-items-element';
+import { MediaQualityRadioGroupElement } from '../../define/menus/quality-radio-group-element';
+import { MediaRadioElement } from '../../define/menus/radio-element';
+import { MediaSpeedRadioGroupElement } from '../../define/menus/speed-radio-group-element';
+import { MediaPosterElement } from '../../define/poster-element';
+import { MediaSliderPreviewElement } from '../../define/sliders/slider-preview-element';
+import { MediaSliderThumbnailElement } from '../../define/sliders/slider-thumbnail-element';
+import { MediaSliderValueElement } from '../../define/sliders/slider-value-element';
+import { MediaTimeSliderElement } from '../../define/sliders/time-slider-element';
+import { MediaVolumeSliderElement } from '../../define/sliders/volume-slider-element';
+import { MediaThumbnailElement } from '../../define/thumbnail-element';
+import { MediaTimeElement } from '../../define/time-element';
+
+defineCustomElement(MediaPlyrLayoutElement);
+
+// Poster
+defineCustomElement(MediaPosterElement);
+
+// Buttons
+defineCustomElement(MediaPlayButtonElement);
+defineCustomElement(MediaMuteButtonElement);
+defineCustomElement(MediaCaptionButtonElement);
+defineCustomElement(MediaPIPButtonElement);
+defineCustomElement(MediaFullscreenButtonElement);
+defineCustomElement(MediaSeekButtonElement);
+defineCustomElement(MediaAirPlayButtonElement);
+defineCustomElement(MediaLiveButtonElement);
+
+// Sliders
+defineCustomElement(MediaVolumeSliderElement);
+defineCustomElement(MediaTimeSliderElement);
+defineCustomElement(MediaSliderPreviewElement);
+defineCustomElement(MediaSliderThumbnailElement);
+defineCustomElement(MediaSliderValueElement);
+
+// Menus
+defineCustomElement(MediaMenuElement);
+defineCustomElement(MediaMenuButtonElement);
+defineCustomElement(MediaMenuItemsElement);
+defineCustomElement(MediaMenuItemElement);
+defineCustomElement(MediaAudioRadioGroupElement);
+defineCustomElement(MediaCaptionsRadioGroupElement);
+defineCustomElement(MediaSpeedRadioGroupElement);
+defineCustomElement(MediaQualityRadioGroupElement);
+defineCustomElement(MediaRadioElement);
+
+// Display
+defineCustomElement(MediaTimeElement);
+defineCustomElement(MediaThumbnailElement);

package/src/elements/bundles/player-ui.ts

@@ -0,0 +1,108 @@
+import { defineCustomElement } from 'maverick.js/element';
+
+import { MediaAnnouncerElement } from '../define/announcer-element';
+import { MediaAirPlayButtonElement } from '../define/buttons/airplay-button-element';
+import { MediaCaptionButtonElement } from '../define/buttons/caption-button-element';
+import { MediaFullscreenButtonElement } from '../define/buttons/fullscreen-button-element';
+import { MediaGoogleCastButtonElement } from '../define/buttons/google-cast-button-element';
+import { MediaLiveButtonElement } from '../define/buttons/live-button-element';
+import { MediaMuteButtonElement } from '../define/buttons/mute-button-element';
+import { MediaPIPButtonElement } from '../define/buttons/pip-button-element';
+import { MediaPlayButtonElement } from '../define/buttons/play-button-element';
+import { MediaSeekButtonElement } from '../define/buttons/seek-button-element';
+import { MediaToggleButtonElement } from '../define/buttons/toggle-button-element';
+import { MediaCaptionsElement } from '../define/captions-element';
+import { MediaChapterTitleElement } from '../define/chapter-title-element';
+import { MediaControlsElement } from '../define/controls-element';
+import { MediaControlsGroupElement } from '../define/controls-group-element';
+import { MediaGestureElement } from '../define/gesture-element';
+import { MediaLayoutElement } from '../define/layouts/layout-element';
+import { MediaAudioGainRadioGroupElement } from '../define/menus/audio-gain-group-element';
+import { MediaAudioRadioGroupElement } from '../define/menus/audio-radio-group-element';
+import { MediaCaptionsRadioGroupElement } from '../define/menus/captions-radio-group-element';
+import { MediaChaptersRadioGroupElement } from '../define/menus/chapters-radio-group-element';
+import { MediaMenuButtonElement } from '../define/menus/menu-button-element';
+import { MediaMenuElement } from '../define/menus/menu-element';
+import { MediaMenuItemElement } from '../define/menus/menu-item-element';
+import { MediaMenuItemsElement } from '../define/menus/menu-items-element';
+import { MediaMenuPortalElement } from '../define/menus/menu-portal-element';
+import { MediaQualityRadioGroupElement } from '../define/menus/quality-radio-group-element';
+import { MediaRadioElement } from '../define/menus/radio-element';
+import { MediaRadioGroupElement } from '../define/menus/radio-group-element';
+import { MediaSpeedRadioGroupElement } from '../define/menus/speed-radio-group-element';
+import { MediaPosterElement } from '../define/poster-element';
+import { MediaAudioGainSliderElement } from '../define/sliders/audio-gain-slider-element';
+import { MediaQualitySliderElement } from '../define/sliders/quality-slider-element';
+import { MediaSliderChaptersElement } from '../define/sliders/slider-chapters-element';
+import { MediaSliderElement } from '../define/sliders/slider-element';
+import { MediaSliderPreviewElement } from '../define/sliders/slider-preview-element';
+import { MediaSliderStepsElement } from '../define/sliders/slider-steps-element';
+import { MediaSliderThumbnailElement } from '../define/sliders/slider-thumbnail-element';
+import { MediaSliderValueElement } from '../define/sliders/slider-value-element';
+import { MediaSliderVideoElement } from '../define/sliders/slider-video-element';
+import { MediaSpeedSliderElement } from '../define/sliders/speed-slider-element';
+import { MediaTimeSliderElement } from '../define/sliders/time-slider-element';
+import { MediaVolumeSliderElement } from '../define/sliders/volume-slider-element';
+import { MediaSpinnerElement } from '../define/spinner-element';
+import { MediaThumbnailElement } from '../define/thumbnail-element';
+import { MediaTimeElement } from '../define/time-element';
+import { MediaTitleElement } from '../define/title-element';
+import { MediaTooltipContentElement } from '../define/tooltips/tooltip-content-element';
+import { MediaTooltipElement } from '../define/tooltips/tooltip-element';
+import { MediaTooltipTriggerElement } from '../define/tooltips/tooltip-trigger-element';
+
+defineCustomElement(MediaLayoutElement);
+defineCustomElement(MediaControlsElement);
+defineCustomElement(MediaControlsGroupElement);
+defineCustomElement(MediaPosterElement);
+defineCustomElement(MediaAnnouncerElement);
+// Tooltips
+defineCustomElement(MediaTooltipElement);
+defineCustomElement(MediaTooltipTriggerElement);
+defineCustomElement(MediaTooltipContentElement);
+// Buttons
+defineCustomElement(MediaPlayButtonElement);
+defineCustomElement(MediaMuteButtonElement);
+defineCustomElement(MediaCaptionButtonElement);
+defineCustomElement(MediaFullscreenButtonElement);
+defineCustomElement(MediaPIPButtonElement);
+defineCustomElement(MediaSeekButtonElement);
+defineCustomElement(MediaAirPlayButtonElement);
+defineCustomElement(MediaGoogleCastButtonElement);
+defineCustomElement(MediaToggleButtonElement);
+// Sliders
+defineCustomElement(MediaSliderElement);
+defineCustomElement(MediaAudioGainSliderElement);
+defineCustomElement(MediaVolumeSliderElement);
+defineCustomElement(MediaTimeSliderElement);
+defineCustomElement(MediaSpeedSliderElement);
+defineCustomElement(MediaQualitySliderElement);
+defineCustomElement(MediaSliderChaptersElement);
+defineCustomElement(MediaSliderStepsElement);
+defineCustomElement(MediaSliderPreviewElement);
+defineCustomElement(MediaSliderValueElement);
+defineCustomElement(MediaSliderThumbnailElement);
+defineCustomElement(MediaSliderVideoElement);
+// Menus
+defineCustomElement(MediaMenuElement);
+defineCustomElement(MediaMenuButtonElement);
+defineCustomElement(MediaMenuPortalElement);
+defineCustomElement(MediaMenuItemsElement);
+defineCustomElement(MediaMenuItemElement);
+defineCustomElement(MediaAudioRadioGroupElement);
+defineCustomElement(MediaCaptionsRadioGroupElement);
+defineCustomElement(MediaSpeedRadioGroupElement);
+defineCustomElement(MediaAudioGainRadioGroupElement);
+defineCustomElement(MediaQualityRadioGroupElement);
+defineCustomElement(MediaChaptersRadioGroupElement);
+defineCustomElement(MediaRadioGroupElement);
+defineCustomElement(MediaRadioElement);
+// Display
+defineCustomElement(MediaGestureElement);
+defineCustomElement(MediaThumbnailElement);
+defineCustomElement(MediaCaptionsElement);
+defineCustomElement(MediaLiveButtonElement);
+defineCustomElement(MediaTimeElement);
+defineCustomElement(MediaTitleElement);
+defineCustomElement(MediaChapterTitleElement);
+defineCustomElement(MediaSpinnerElement);

package/src/elements/bundles/player.ts

@@ -0,0 +1,7 @@
+import { defineCustomElement } from 'maverick.js/element';
+
+import { MediaPlayerElement } from '../define/player-element';
+import { MediaProviderElement } from '../define/provider-element';
+
+defineCustomElement(MediaPlayerElement);
+defineCustomElement(MediaProviderElement);

package/src/elements/define/announcer-element.ts

@@ -0,0 +1,20 @@
+import { Host } from 'maverick.js/element';
+
+import { MediaAnnouncer } from '../../components/aria/announcer';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/announcer}
+ * @example
+ * ```html
+ * <media-announcer></media-announcer>
+ * ```
+ */
+export class MediaAnnouncerElement extends Host(HTMLElement, MediaAnnouncer) {
+  static tagName = 'media-announcer';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-announcer': MediaAnnouncerElement;
+  }
+}

package/src/elements/define/buttons/airplay-button-element.ts

@@ -0,0 +1,21 @@
+import { Host } from 'maverick.js/element';
+
+import { AirPlayButton } from '../../../components/ui/buttons/airplay-button';
+
+/**
+ * @example
+ * ```html
+ * <media-airplay-button>
+ *   <media-icon type="airplay"></media-icon>
+ * </media-airplay-button>
+ * ```
+ */
+export class MediaAirPlayButtonElement extends Host(HTMLElement, AirPlayButton) {
+  static tagName = 'media-airplay-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-airplay-button': MediaAirPlayButtonElement;
+  }
+}

package/src/elements/define/buttons/caption-button-element.ts

@@ -0,0 +1,22 @@
+import { Host } from 'maverick.js/element';
+
+import { CaptionButton } from '../../../components/ui/buttons/caption-button';
+
+/**
+ * @example
+ * ```html
+ * <media-caption-button>
+ *   <media-icon type="closed-captions-on"></media-icon>
+ *   <media-icon type="closed-captions"></media-icon>
+ * </media-caption-button>
+ * ```
+ */
+export class MediaCaptionButtonElement extends Host(HTMLElement, CaptionButton) {
+  static tagName = 'media-caption-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-caption-button': MediaCaptionButtonElement;
+  }
+}

package/src/elements/define/buttons/fullscreen-button-element.ts

@@ -0,0 +1,22 @@
+import { Host } from 'maverick.js/element';
+
+import { FullscreenButton } from '../../../components/ui/buttons/fullscreen-button';
+
+/**
+ * @example
+ * ```html
+ * <media-fullscreen-button>
+ *   <media-icon type="fullscreen"></media-icon>
+ *   <media-icon type="fullscreen-exit"></media-icon>
+ * </media-fullscreen-button>
+ * ```
+ */
+export class MediaFullscreenButtonElement extends Host(HTMLElement, FullscreenButton) {
+  static tagName = 'media-fullscreen-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-fullscreen-button': MediaFullscreenButtonElement;
+  }
+}

package/src/elements/define/buttons/google-cast-button-element.ts

@@ -0,0 +1,21 @@
+import { Host } from 'maverick.js/element';
+
+import { GoogleCastButton } from '../../../components/ui/buttons/google-cast-button';
+
+/**
+ * @example
+ * ```html
+ * <media-google-cast-button>
+ *   <media-icon type="chromecast"></media-icon>
+ * </media-google-cast-button>
+ * ```
+ */
+export class MediaGoogleCastButtonElement extends Host(HTMLElement, GoogleCastButton) {
+  static tagName = 'media-google-cast-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-google-cast-button': MediaGoogleCastButtonElement;
+  }
+}

package/src/elements/define/buttons/live-button-element.ts

@@ -0,0 +1,22 @@
+import { Host } from 'maverick.js/element';
+
+import { LiveButton } from '../../../components/ui/buttons/live-button';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/buttons/live-button}
+ * @example
+ * ```html
+ * <media-live-button>
+ *   <!-- ... -->
+ * </media-live-button>
+ * ```
+ */
+export class MediaLiveButtonElement extends Host(HTMLElement, LiveButton) {
+  static tagName = 'media-live-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-live-button': MediaLiveButtonElement;
+  }
+}

package/src/elements/define/buttons/mute-button-element.ts

@@ -0,0 +1,23 @@
+import { Host } from 'maverick.js/element';
+
+import { MuteButton } from '../../../components/ui/buttons/mute-button';
+
+/**
+ * @example
+ * ```html
+ * <media-mute-button>
+ *   <media-icon type="mute"></media-icon>
+ *   <media-icon type="volume-low"></media-icon>
+ *   <media-icon type="volume-high"></media-icon>
+ * </media-mute-button>
+ * ```
+ */
+export class MediaMuteButtonElement extends Host(HTMLElement, MuteButton) {
+  static tagName = 'media-mute-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-mute-button': MediaMuteButtonElement;
+  }
+}

package/src/elements/define/buttons/pip-button-element.ts

@@ -0,0 +1,22 @@
+import { Host } from 'maverick.js/element';
+
+import { PIPButton } from '../../../components/ui/buttons/pip-button';
+
+/**
+ * @example
+ * ```html
+ * <media-pip-button>
+ *   <media-icon type="picture-in-picture"></media-icon>
+ *   <media-icon type="picture-in-picture-exit"></media-icon>
+ * </media-pip-button>
+ * ```
+ */
+export class MediaPIPButtonElement extends Host(HTMLElement, PIPButton) {
+  static tagName = 'media-pip-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-pip-button': MediaPIPButtonElement;
+  }
+}

package/src/elements/define/buttons/play-button-element.ts

@@ -0,0 +1,23 @@
+import { Host } from 'maverick.js/element';
+
+import { PlayButton } from '../../../components/ui/buttons/play-button';
+
+/**
+ * @example
+ * ```html
+ * <media-play-button>
+ *   <media-icon type="play"></media-icon>
+ *   <media-icon type="pause"></media-icon>
+ *   <media-icon type="replay"></media-icon>
+ * </media-play-button>
+ * ```
+ */
+export class MediaPlayButtonElement extends Host(HTMLElement, PlayButton) {
+  static tagName = 'media-play-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-play-button': MediaPlayButtonElement;
+  }
+}

package/src/elements/define/buttons/seek-button-element.ts

@@ -0,0 +1,26 @@
+import { Host } from 'maverick.js/element';
+
+import { SeekButton } from '../../../components/ui/buttons/seek-button';
+
+/**
+ * @example
+ * ```html
+ * <!-- Forward +30s on each press. -->
+ * <media-seek-button seconds="+30">
+ *   <media-icon type="seek-forward"></media-icon>
+ * </media-seek-button>
+ * <!-- Backward -30s on each press. -->
+ * <media-seek-button seconds="-30">
+ *   <media-icon type="seek-backward"></media-icon>
+ * </media-seek-button>
+ * ```
+ */
+export class MediaSeekButtonElement extends Host(HTMLElement, SeekButton) {
+  static tagName = 'media-seek-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-seek-button': MediaSeekButtonElement;
+  }
+}

package/src/elements/define/buttons/toggle-button-element.ts

@@ -0,0 +1,21 @@
+import { Host } from 'maverick.js/element';
+
+import { ToggleButton } from '../../../components/ui/buttons/toggle-button';
+
+/**
+ * @example
+ * ```html
+ * <media-toggle-button aria-label="...">
+ *   <!-- ... -->
+ * </media-toggle-button>
+ * ```
+ */
+export class MediaToggleButtonElement extends Host(HTMLElement, ToggleButton) {
+  static tagName = 'media-toggle-button';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-toggle-button': MediaToggleButtonElement;
+  }
+}

package/src/elements/define/captions-element.ts

@@ -0,0 +1,20 @@
+import { Host } from 'maverick.js/element';
+
+import { Captions } from '../../components/ui/captions/captions';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/captions}
+ * @example
+ * ```html
+ * <media-captions></media-captions>
+ * ```
+ */
+export class MediaCaptionsElement extends Host(HTMLElement, Captions) {
+  static tagName = 'media-captions';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-captions': MediaCaptionsElement;
+  }
+}

package/src/elements/define/chapter-title-element.ts

@@ -0,0 +1,54 @@
+import { Component, effect, signal, type WriteSignal } from 'maverick.js';
+import { Host } from 'maverick.js/element';
+
+import { useMediaContext, type MediaContext } from '../../core/api/media-context';
+import { watchCueTextChange } from '../../core/tracks/text/utils';
+
+interface ChapterTitleProps {
+  /**
+   * Specify text to be displayed when no chapter title is available.
+   */
+  defaultText: string;
+}
+
+class ChapterTitle extends Component<ChapterTitleProps> {
+  static props: ChapterTitleProps = {
+    defaultText: '',
+  };
+}
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/chapter-title}
+ * @example
+ * ```html
+ * <media-chapter-title></media-chapter-title>
+ * ```
+ */
+export class MediaChapterTitleElement extends Host(HTMLElement, ChapterTitle) {
+  static tagName = 'media-chapter-title';
+
+  #media!: MediaContext;
+  #chapterTitle!: WriteSignal<string>;
+
+  protected onSetup() {
+    this.#media = useMediaContext();
+    this.#chapterTitle = signal('');
+  }
+
+  protected onConnect() {
+    const tracks = this.#media.textTracks;
+    watchCueTextChange(tracks, 'chapters', this.#chapterTitle.set);
+    effect(this.#watchChapterTitle.bind(this));
+  }
+
+  #watchChapterTitle() {
+    const { defaultText } = this.$props;
+    this.textContent = this.#chapterTitle() || defaultText();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-chapter-title': MediaChapterTitleElement;
+  }
+}

package/src/elements/define/controls-element.ts

@@ -0,0 +1,26 @@
+import { Host } from 'maverick.js/element';
+
+import { Controls } from '../../components/ui/controls';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/controls}
+ * @example
+ * ```html
+ * <media-player>
+ *   <!-- ... -->
+ *   <media-controls>
+ *     <media-controls-group></media-controls-group>
+ *     <media-controls-group></media-controls-group>
+ *   </media-controls>
+ * </media-player>
+ * ```
+ */
+export class MediaControlsElement extends Host(HTMLElement, Controls) {
+  static tagName = 'media-controls';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-controls': MediaControlsElement;
+  }
+}

package/src/elements/define/controls-group-element.ts

@@ -0,0 +1,26 @@
+import { Host } from 'maverick.js/element';
+
+import { ControlsGroup } from '../../components/ui/controls-group';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/controls}
+ * @example
+ * ```html
+ * <media-player>
+ *   <!-- ... -->
+ *   <media-controls>
+ *     <media-controls-group></media-controls-group>
+ *     <media-controls-group></media-controls-group>
+ *   </media-controls>
+ * </media-player>
+ * ```
+ */
+export class MediaControlsGroupElement extends Host(HTMLElement, ControlsGroup) {
+  static tagName = 'media-controls-group';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-controls-group': MediaControlsGroupElement;
+  }
+}

package/src/elements/define/gesture-element.ts

@@ -0,0 +1,24 @@
+import { Host } from 'maverick.js/element';
+
+import { Gesture } from '../../components/ui/gesture';
+
+/**
+ * @docs {@link https://www.vidstack.io/docs/wc/player/components/display/gesture}
+ * @example
+ * ```html
+ * <media-player>
+ *   <media-provider>
+ *     <media-gesture event="pointerup" action="toggle:paused"></media-gesture>
+ *   </media-provider>
+ * </media-player>
+ * ```
+ */
+export class MediaGestureElement extends Host(HTMLElement, Gesture) {
+  static tagName = 'media-gesture';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'media-gesture': MediaGestureElement;
+  }
+}