@videojs/html 10.0.0-rc.1 → 10.0.0-rc.2

package/dist/dev/index.d.ts

@@ -1,99 +1,99 @@
 import { UIElement, UIElementConstructor } from "./ui/ui-element.js";
-import { ContainerElement } from "./ui/container/container-element.js";
-import { ErrorDialogElement } from "./ui/error-dialog/error-dialog-element.js";
+import { ContainerElement } from "./ui/container/element.js";
+import { ErrorDialogElement } from "./ui/error-dialog/element.js";
 import { DEFAULT_SEEK_STEP } from "./constants.js";
 import { I18nContext, I18nContextValue, i18nContext } from "./i18n/context.js";
 import { I18nProviderElement, I18nProviderMixin } from "./i18n/provider-element.js";
-import { I18nTextMixin, MediaTextElement as TextElement } from "./ui/text/text-element.js";
+import { I18nTextMixin, MediaTextElement as TextElement } from "./ui/text/element.js";
 import { I18nController } from "./i18n/controller.js";
 import { CreateI18nOptions, CreateI18nResult, createI18n } from "./i18n/create-i18n.js";
 import { resolvePlayerLocale, resolveProviderLocale } from "./i18n/locale.js";
 import { FlatTranslations, Locale, TranslationParams, Translations, Translator, createTranslator, findLocaleKeys, getI18nTranslations, hasRegisteredLocale, onI18nRegistryChange, registerI18n } from "./i18n/index.js";
 import { CONTAINER_CONTEXT_KEY, ContainerContext, ContainerContextConsumer, ContainerContextValue, MEDIA_CONTEXT_KEY, MediaContext, MediaContextValue, PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, containerContext, mediaContext, playerContext } from "./player/context.js";
 import { PlayerElement, PlayerElementConstructor } from "./store/types.js";
-import { PlayerController, PlayerControllerHost } from "./player/player-controller.js";
+import { PlayerController, PlayerControllerHost } from "./player/controller.js";
 import { CreatePlayerConfig, CreatePlayerResult, createPlayer } from "./player/create-player.js";
 import { MediaAttachMixin, createMediaAttachMixin } from "./store/media-attach-mixin.js";
 import { MediaButtonElement } from "./ui/media-button-element.js";
-import { AirPlayButtonElement } from "./ui/airplay-button/airplay-button-element.js";
-import { DialogElement } from "./ui/dialog/dialog-element.js";
-import { AlertDialogElement } from "./ui/alert-dialog/alert-dialog-element.js";
-import { MenuRadioItemElement } from "./ui/menu/menu-radio-item-element.js";
-import { MenuRadioGroupElement } from "./ui/menu/menu-radio-group-element.js";
-import { AudioTrackRadioGroupElement } from "./ui/audio-track-radio-group/audio-track-radio-group-element.js";
-import { BufferingIndicatorElement } from "./ui/buffering-indicator/buffering-indicator-element.js";
-import { CaptionsButtonElement } from "./ui/captions-button/captions-button-element.js";
-import { CaptionsRadioGroupElement } from "./ui/captions-radio-group/captions-radio-group-element.js";
-import { CastButtonElement } from "./ui/cast-button/cast-button-element.js";
+import { AirPlayButtonElement } from "./ui/airplay-button/element.js";
+import { DialogElement } from "./ui/dialog/element.js";
+import { AlertDialogElement } from "./ui/alert-dialog/element.js";
+import { MenuRadioItemElement } from "./ui/menu/radio-item.js";
+import { MenuRadioGroupElement } from "./ui/menu/radio-group.js";
+import { AudioTrackRadioGroupElement } from "./ui/audio-track-radio-group/element.js";
+import { BufferingIndicatorElement } from "./ui/buffering-indicator/element.js";
+import { CaptionsButtonElement } from "./ui/captions-button/element.js";
+import { CaptionsRadioGroupElement } from "./ui/captions-radio-group/element.js";
+import { CastButtonElement } from "./ui/cast-button/element.js";
 import { ContextPartElement, PartContextValue } from "./ui/context-part-element.js";
-import { ControlsBackdropElement } from "./ui/controls/controls-backdrop-element.js";
-import { ControlsContentElement } from "./ui/controls/controls-content-element.js";
-import { ControlsElement } from "./ui/controls/controls-element.js";
-import { ControlsGroupElement } from "./ui/controls/controls-group-element.js";
+import { ControlsBackdropElement } from "./ui/controls/backdrop.js";
+import { ControlsContentElement } from "./ui/controls/content.js";
+import { ControlsElement } from "./ui/controls/element.js";
+import { ControlsGroupElement } from "./ui/controls/group.js";
 import { DialogContextValue, dialogContext } from "./ui/dialog/context.js";
-import { DialogCloseElement } from "./ui/dialog/dialog-close-element.js";
-import { DialogDescriptionElement } from "./ui/dialog/dialog-description-element.js";
-import { DialogPopupElement } from "./ui/dialog/dialog-popup-element.js";
-import { DialogTitleElement } from "./ui/dialog/dialog-title-element.js";
-import { FullscreenButtonElement } from "./ui/fullscreen-button/fullscreen-button-element.js";
-import { GestureElement } from "./ui/gesture/gesture-element.js";
+import { DialogCloseElement } from "./ui/dialog/close.js";
+import { DialogDescriptionElement } from "./ui/dialog/description.js";
+import { DialogPopupElement } from "./ui/dialog/popup.js";
+import { DialogTitleElement } from "./ui/dialog/title.js";
+import { FullscreenButtonElement } from "./ui/fullscreen-button/element.js";
+import { GestureElement } from "./ui/gesture/element.js";
 import { AriaKeyShortcutsController } from "./ui/hotkey/aria-key-shortcuts-controller.js";
-import { HotkeyElement } from "./ui/hotkey/hotkey-element.js";
-import { LiveButtonElement } from "./ui/live-button/live-button-element.js";
+import { HotkeyElement } from "./ui/hotkey/element.js";
+import { LiveButtonElement } from "./ui/live-button/element.js";
 import { MediaUIElement } from "./ui/media-ui-element.js";
 import { RadioGroupContextValue, radioGroupContext } from "./ui/radio-group/context.js";
 import { MenuContextValue, MenuGroupContextValue, menuContext, menuGroupContext } from "./ui/menu/context.js";
-import { MenuCheckboxItemElement } from "./ui/menu/menu-checkbox-item-element.js";
-import { MenuContentElement } from "./ui/menu/menu-content-element.js";
-import { MenuElement } from "./ui/menu/menu-element.js";
-import { MenuGroupElement } from "./ui/menu/menu-group-element.js";
-import { MenuGroupLabelElement } from "./ui/menu/menu-group-label-element.js";
-import { MenuItemElement } from "./ui/menu/menu-item-element.js";
-import { MenuItemIndicatorElement } from "./ui/menu/menu-item-indicator-element.js";
-import { MenuSeparatorElement } from "./ui/menu/menu-separator-element.js";
-import { MuteButtonElement } from "./ui/mute-button/mute-button-element.js";
-import { PiPButtonElement } from "./ui/pip-button/pip-button-element.js";
-import { PlayButtonElement } from "./ui/play-button/play-button-element.js";
-import { PlaybackRateButtonElement } from "./ui/playback-rate-button/playback-rate-button-element.js";
-import { PlaybackRateRadioGroupElement } from "./ui/playback-rate-radio-group/playback-rate-radio-group-element.js";
-import { PopoverElement } from "./ui/popover/popover-element.js";
-import { PosterElement } from "./ui/poster/poster-element.js";
-import { QualityRadioGroupElement } from "./ui/quality-radio-group/quality-radio-group-element.js";
-import { SeekButtonElement } from "./ui/seek-button/seek-button-element.js";
-import { SeekIndicatorElement } from "./ui/seek-indicator/seek-indicator-element.js";
-import { SeekIndicatorValueElement } from "./ui/seek-indicator/seek-indicator-value-element.js";
+import { MenuCheckboxItemElement } from "./ui/menu/checkbox-item.js";
+import { MenuContentElement } from "./ui/menu/content.js";
+import { MenuElement } from "./ui/menu/element.js";
+import { MenuGroupElement } from "./ui/menu/group.js";
+import { MenuGroupLabelElement } from "./ui/menu/group-label.js";
+import { MenuItemElement } from "./ui/menu/item.js";
+import { MenuItemIndicatorElement } from "./ui/menu/item-indicator.js";
+import { MenuSeparatorElement } from "./ui/menu/separator.js";
+import { MuteButtonElement } from "./ui/mute-button/element.js";
+import { PiPButtonElement } from "./ui/pip-button/element.js";
+import { PlayButtonElement } from "./ui/play-button/element.js";
+import { PlaybackRateButtonElement } from "./ui/playback-rate-button/element.js";
+import { PlaybackRateRadioGroupElement } from "./ui/playback-rate-radio-group/element.js";
+import { PopoverElement } from "./ui/popover/element.js";
+import { PosterElement } from "./ui/poster/element.js";
+import { QualityRadioGroupElement } from "./ui/quality-radio-group/element.js";
+import { SeekButtonElement } from "./ui/seek-button/element.js";
+import { SeekIndicatorElement } from "./ui/seek-indicator/element.js";
+import { SeekIndicatorValueElement } from "./ui/seek-indicator/value.js";
 import { SliderContextValue, sliderContext } from "./ui/slider/context.js";
-import { SliderBufferElement } from "./ui/slider/slider-buffer-element.js";
-import { SliderElement } from "./ui/slider/slider-element.js";
-import { SliderEventMap, SliderValueEventDetail } from "./ui/slider/slider-events.js";
-import { SliderFillElement } from "./ui/slider/slider-fill-element.js";
-import { SliderPreviewElement } from "./ui/slider/slider-preview-element.js";
-import { SliderThumbElement } from "./ui/slider/slider-thumb-element.js";
-import { ThumbnailElement } from "./ui/thumbnail/thumbnail-element.js";
-import { SliderThumbnailElement } from "./ui/slider/slider-thumbnail-element.js";
-import { SliderTrackElement } from "./ui/slider/slider-track-element.js";
-import { SliderValueElement } from "./ui/slider/slider-value-element.js";
-import { StatusAnnouncerElement } from "./ui/status-announcer/status-announcer-element.js";
-import { StatusIndicatorElement } from "./ui/status-indicator/status-indicator-element.js";
-import { StatusIndicatorValueElement } from "./ui/status-indicator/status-indicator-value-element.js";
-import { TimeElement } from "./ui/time/time-element.js";
-import { TimeGroupElement } from "./ui/time/time-group-element.js";
-import { TimeSeparatorElement } from "./ui/time/time-separator-element.js";
-import { TimeSliderChapterTitleElement } from "./ui/time-slider/time-slider-chapters/time-slider-chapter-title-element.js";
-import { TimeSliderChaptersElement } from "./ui/time-slider/time-slider-chapters/time-slider-chapters-element.js";
-import { TimeSliderElement } from "./ui/time-slider/time-slider-element.js";
-import { TitleElement } from "./ui/title/title-element.js";
+import { SliderBufferElement } from "./ui/slider/buffer.js";
+import { SliderElement } from "./ui/slider/element.js";
+import { SliderEventMap, SliderValueEventDetail } from "./ui/slider/events.js";
+import { SliderFillElement } from "./ui/slider/fill.js";
+import { SliderPreviewElement } from "./ui/slider/preview.js";
+import { SliderThumbElement } from "./ui/slider/thumb.js";
+import { ThumbnailElement } from "./ui/thumbnail/element.js";
+import { SliderThumbnailElement } from "./ui/slider/thumbnail.js";
+import { SliderTrackElement } from "./ui/slider/track.js";
+import { SliderValueElement } from "./ui/slider/value.js";
+import { StatusAnnouncerElement } from "./ui/status-announcer/element.js";
+import { StatusIndicatorElement } from "./ui/status-indicator/element.js";
+import { StatusIndicatorValueElement } from "./ui/status-indicator/value.js";
+import { TimeElement } from "./ui/time/element.js";
+import { TimeGroupElement } from "./ui/time/group.js";
+import { TimeSeparatorElement } from "./ui/time/separator.js";
+import { TimeSliderChapterTitleElement } from "./ui/time-slider/chapter-title.js";
+import { TimeSliderChaptersElement } from "./ui/time-slider/chapters.js";
+import { TimeSliderElement } from "./ui/time-slider/element.js";
+import { TitleElement } from "./ui/title/element.js";
 import { tooltipGroupContext } from "./ui/tooltip/context.js";
-import { TooltipElement } from "./ui/tooltip/tooltip-element.js";
-import { TooltipGroupElement } from "./ui/tooltip/tooltip-group-element.js";
-import { TooltipLabelElement } from "./ui/tooltip/tooltip-label-element.js";
-import { TooltipShortcutElement } from "./ui/tooltip/tooltip-shortcut-element.js";
-import { VolumeIndicatorElement } from "./ui/volume-indicator/volume-indicator-element.js";
-import { VolumeIndicatorFillElement } from "./ui/volume-indicator/volume-indicator-fill-element.js";
-import { VolumeIndicatorValueElement } from "./ui/volume-indicator/volume-indicator-value-element.js";
-import { VolumePopoverElement } from "./ui/volume-popover/volume-popover-element.js";
-import { VolumeSliderElement } from "./ui/volume-slider/volume-slider-element.js";
-import { DialogBackdropElement } from "./ui/dialog/dialog-backdrop-element.js";
+import { TooltipElement } from "./ui/tooltip/element.js";
+import { TooltipGroupElement } from "./ui/tooltip/group.js";
+import { TooltipLabelElement } from "./ui/tooltip/label.js";
+import { TooltipShortcutElement } from "./ui/tooltip/shortcut.js";
+import { VolumeIndicatorElement } from "./ui/volume-indicator/element.js";
+import { VolumeIndicatorFillElement } from "./ui/volume-indicator/fill.js";
+import { VolumeIndicatorValueElement } from "./ui/volume-indicator/value.js";
+import { VolumePopoverElement } from "./ui/volume-popover/element.js";
+import { VolumeSliderElement } from "./ui/volume-slider/element.js";
+import { DialogBackdropElement } from "./ui/dialog/backdrop.js";
 import { DestroyMixin, Destroyable, PropertyDeclaration, PropertyDeclarationMap, PropertyValues, ReactiveController, ReactiveControllerHost, ReactiveElement } from "@videojs/element";
 import { NodeListLike, hasMetadata, isMediaAudioTrackCapable, isMediaBufferCapable, isMediaErrorCapable, isMediaLiveCapable, isMediaPauseCapable, isMediaPlaybackRateCapable, isMediaRemotePlaybackCapable, isMediaSeekCapable, isMediaSourceCapable, isMediaStreamTypeCapable, isMediaTextTrackCapable, isMediaVideoDimensionsCapable, isMediaVideoRenditionCapable, isMediaVolumeCapable, isQuerySelectorAllCapable } from "@videojs/media";
 import { Comparator, Selector, createSelector, shallowEqual } from "@videojs/store";

package/dist/dev/index.js

@@ -3,95 +3,95 @@ import { i18nContext } from "./i18n/context.js";
 import { I18nController } from "./i18n/controller.js";
 import { resolvePlayerLocale, resolveProviderLocale } from "./i18n/locale.js";
 import { I18nProviderElement, I18nProviderMixin } from "./i18n/provider-element.js";
-import { I18nTextMixin, MediaTextElement as TextElement } from "./ui/text/text-element.js";
+import { I18nTextMixin, MediaTextElement as TextElement } from "./ui/text/element.js";
 import { createI18n } from "./i18n/create-i18n.js";
 import { createTranslator, findLocaleKeys, getI18nTranslations, hasRegisteredLocale, onI18nRegistryChange, registerI18n } from "./i18n/index.js";
 import { CONTAINER_CONTEXT_KEY, MEDIA_CONTEXT_KEY, PLAYER_CONTEXT_KEY, containerContext, mediaContext, playerContext } from "./player/context.js";
-import { PlayerController } from "./player/player-controller.js";
+import { PlayerController } from "./player/controller.js";
 import { UIElement } from "./ui/ui-element.js";
 import { createPlayer } from "./player/create-player.js";
 import { MediaAttachMixin, createMediaAttachMixin } from "./store/media-attach-mixin.js";
 import { AriaKeyShortcutsController } from "./ui/hotkey/aria-key-shortcuts-controller.js";
 import { MediaButtonElement } from "./ui/media-button-element.js";
-import { AirPlayButtonElement } from "./ui/airplay-button/airplay-button-element.js";
+import { AirPlayButtonElement } from "./ui/airplay-button/element.js";
 import { dialogContext } from "./ui/dialog/context.js";
-import { DialogElement } from "./ui/dialog/dialog-element.js";
-import { AlertDialogElement } from "./ui/alert-dialog/alert-dialog-element.js";
+import { DialogElement } from "./ui/dialog/element.js";
+import { AlertDialogElement } from "./ui/alert-dialog/element.js";
 import { radioGroupContext } from "./ui/radio-group/context.js";
 import { menuContext, menuGroupContext } from "./ui/menu/context.js";
-import { MenuRadioItemElement } from "./ui/menu/menu-radio-item-element.js";
-import { MenuRadioGroupElement } from "./ui/menu/menu-radio-group-element.js";
-import { MenuItemIndicatorElement } from "./ui/menu/menu-item-indicator-element.js";
-import { AudioTrackRadioGroupElement } from "./ui/audio-track-radio-group/audio-track-radio-group-element.js";
-import { BufferingIndicatorElement } from "./ui/buffering-indicator/buffering-indicator-element.js";
-import { CaptionsButtonElement } from "./ui/captions-button/captions-button-element.js";
-import { CaptionsRadioGroupElement } from "./ui/captions-radio-group/captions-radio-group-element.js";
-import { CastButtonElement } from "./ui/cast-button/cast-button-element.js";
-import { ContainerElement } from "./ui/container/container-element.js";
+import { MenuRadioItemElement } from "./ui/menu/radio-item.js";
+import { MenuRadioGroupElement } from "./ui/menu/radio-group.js";
+import { MenuItemIndicatorElement } from "./ui/menu/item-indicator.js";
+import { AudioTrackRadioGroupElement } from "./ui/audio-track-radio-group/element.js";
+import { BufferingIndicatorElement } from "./ui/buffering-indicator/element.js";
+import { CaptionsButtonElement } from "./ui/captions-button/element.js";
+import { CaptionsRadioGroupElement } from "./ui/captions-radio-group/element.js";
+import { CastButtonElement } from "./ui/cast-button/element.js";
+import { ContainerElement } from "./ui/container/element.js";
 import { ContextPartElement } from "./ui/context-part-element.js";
-import { ControlsBackdropElement } from "./ui/controls/controls-backdrop-element.js";
-import { ControlsContentElement } from "./ui/controls/controls-content-element.js";
-import { ControlsElement } from "./ui/controls/controls-element.js";
-import { ControlsGroupElement } from "./ui/controls/controls-group-element.js";
-import { DialogBackdropElement } from "./ui/dialog/dialog-backdrop-element.js";
-import { DialogCloseElement } from "./ui/dialog/dialog-close-element.js";
-import { DialogDescriptionElement } from "./ui/dialog/dialog-description-element.js";
-import { DialogPopupElement } from "./ui/dialog/dialog-popup-element.js";
-import { DialogTitleElement } from "./ui/dialog/dialog-title-element.js";
-import { ErrorDialogElement } from "./ui/error-dialog/error-dialog-element.js";
-import { FullscreenButtonElement } from "./ui/fullscreen-button/fullscreen-button-element.js";
-import { GestureElement } from "./ui/gesture/gesture-element.js";
-import { HotkeyElement } from "./ui/hotkey/hotkey-element.js";
-import { LiveButtonElement } from "./ui/live-button/live-button-element.js";
+import { ControlsBackdropElement } from "./ui/controls/backdrop.js";
+import { ControlsContentElement } from "./ui/controls/content.js";
+import { ControlsElement } from "./ui/controls/element.js";
+import { ControlsGroupElement } from "./ui/controls/group.js";
+import { DialogBackdropElement } from "./ui/dialog/backdrop.js";
+import { DialogCloseElement } from "./ui/dialog/close.js";
+import { DialogDescriptionElement } from "./ui/dialog/description.js";
+import { DialogPopupElement } from "./ui/dialog/popup.js";
+import { DialogTitleElement } from "./ui/dialog/title.js";
+import { ErrorDialogElement } from "./ui/error-dialog/element.js";
+import { FullscreenButtonElement } from "./ui/fullscreen-button/element.js";
+import { GestureElement } from "./ui/gesture/element.js";
+import { HotkeyElement } from "./ui/hotkey/element.js";
+import { LiveButtonElement } from "./ui/live-button/element.js";
 import { MediaUIElement } from "./ui/media-ui-element.js";
-import { MenuCheckboxItemElement } from "./ui/menu/menu-checkbox-item-element.js";
-import { MenuContentElement } from "./ui/menu/menu-content-element.js";
-import { MenuElement } from "./ui/menu/menu-element.js";
-import { MenuGroupElement } from "./ui/menu/menu-group-element.js";
-import { MenuGroupLabelElement } from "./ui/menu/menu-group-label-element.js";
-import { MenuItemElement } from "./ui/menu/menu-item-element.js";
-import { MenuSeparatorElement } from "./ui/menu/menu-separator-element.js";
-import { MuteButtonElement } from "./ui/mute-button/mute-button-element.js";
-import { PiPButtonElement } from "./ui/pip-button/pip-button-element.js";
-import { PlayButtonElement } from "./ui/play-button/play-button-element.js";
-import { PlaybackRateButtonElement } from "./ui/playback-rate-button/playback-rate-button-element.js";
-import { PlaybackRateRadioGroupElement } from "./ui/playback-rate-radio-group/playback-rate-radio-group-element.js";
-import { PopoverElement } from "./ui/popover/popover-element.js";
-import { PosterElement } from "./ui/poster/poster-element.js";
-import { QualityRadioGroupElement } from "./ui/quality-radio-group/quality-radio-group-element.js";
-import { SeekButtonElement } from "./ui/seek-button/seek-button-element.js";
-import { SeekIndicatorElement } from "./ui/seek-indicator/seek-indicator-element.js";
-import { SeekIndicatorValueElement } from "./ui/seek-indicator/seek-indicator-value-element.js";
+import { MenuCheckboxItemElement } from "./ui/menu/checkbox-item.js";
+import { MenuContentElement } from "./ui/menu/content.js";
+import { MenuElement } from "./ui/menu/element.js";
+import { MenuGroupElement } from "./ui/menu/group.js";
+import { MenuGroupLabelElement } from "./ui/menu/group-label.js";
+import { MenuItemElement } from "./ui/menu/item.js";
+import { MenuSeparatorElement } from "./ui/menu/separator.js";
+import { MuteButtonElement } from "./ui/mute-button/element.js";
+import { PiPButtonElement } from "./ui/pip-button/element.js";
+import { PlayButtonElement } from "./ui/play-button/element.js";
+import { PlaybackRateButtonElement } from "./ui/playback-rate-button/element.js";
+import { PlaybackRateRadioGroupElement } from "./ui/playback-rate-radio-group/element.js";
+import { PopoverElement } from "./ui/popover/element.js";
+import { PosterElement } from "./ui/poster/element.js";
+import { QualityRadioGroupElement } from "./ui/quality-radio-group/element.js";
+import { SeekButtonElement } from "./ui/seek-button/element.js";
+import { SeekIndicatorElement } from "./ui/seek-indicator/element.js";
+import { SeekIndicatorValueElement } from "./ui/seek-indicator/value.js";
 import { sliderContext } from "./ui/slider/context.js";
-import { SliderBufferElement } from "./ui/slider/slider-buffer-element.js";
-import { SliderElement } from "./ui/slider/slider-element.js";
-import { SliderFillElement } from "./ui/slider/slider-fill-element.js";
-import { SliderPreviewElement } from "./ui/slider/slider-preview-element.js";
-import { SliderThumbElement } from "./ui/slider/slider-thumb-element.js";
-import { ThumbnailElement } from "./ui/thumbnail/thumbnail-element.js";
-import { SliderThumbnailElement } from "./ui/slider/slider-thumbnail-element.js";
-import { SliderTrackElement } from "./ui/slider/slider-track-element.js";
-import { SliderValueElement } from "./ui/slider/slider-value-element.js";
-import { StatusAnnouncerElement } from "./ui/status-announcer/status-announcer-element.js";
-import { StatusIndicatorElement } from "./ui/status-indicator/status-indicator-element.js";
-import { StatusIndicatorValueElement } from "./ui/status-indicator/status-indicator-value-element.js";
-import { TimeElement } from "./ui/time/time-element.js";
-import { TimeGroupElement } from "./ui/time/time-group-element.js";
-import { TimeSeparatorElement } from "./ui/time/time-separator-element.js";
-import { TimeSliderChapterTitleElement } from "./ui/time-slider/time-slider-chapters/time-slider-chapter-title-element.js";
-import { TimeSliderChaptersElement } from "./ui/time-slider/time-slider-chapters/time-slider-chapters-element.js";
-import { TimeSliderElement } from "./ui/time-slider/time-slider-element.js";
-import { TitleElement } from "./ui/title/title-element.js";
+import { SliderBufferElement } from "./ui/slider/buffer.js";
+import { SliderElement } from "./ui/slider/element.js";
+import { SliderFillElement } from "./ui/slider/fill.js";
+import { SliderPreviewElement } from "./ui/slider/preview.js";
+import { SliderThumbElement } from "./ui/slider/thumb.js";
+import { ThumbnailElement } from "./ui/thumbnail/element.js";
+import { SliderThumbnailElement } from "./ui/slider/thumbnail.js";
+import { SliderTrackElement } from "./ui/slider/track.js";
+import { SliderValueElement } from "./ui/slider/value.js";
+import { StatusAnnouncerElement } from "./ui/status-announcer/element.js";
+import { StatusIndicatorElement } from "./ui/status-indicator/element.js";
+import { StatusIndicatorValueElement } from "./ui/status-indicator/value.js";
+import { TimeElement } from "./ui/time/element.js";
+import { TimeGroupElement } from "./ui/time/group.js";
+import { TimeSeparatorElement } from "./ui/time/separator.js";
+import { TimeSliderChapterTitleElement } from "./ui/time-slider/chapter-title.js";
+import { TimeSliderChaptersElement } from "./ui/time-slider/chapters.js";
+import { TimeSliderElement } from "./ui/time-slider/element.js";
+import { TitleElement } from "./ui/title/element.js";
 import { tooltipGroupContext } from "./ui/tooltip/context.js";
-import { TooltipLabelElement } from "./ui/tooltip/tooltip-label-element.js";
-import { TooltipShortcutElement } from "./ui/tooltip/tooltip-shortcut-element.js";
-import { TooltipElement } from "./ui/tooltip/tooltip-element.js";
-import { TooltipGroupElement } from "./ui/tooltip/tooltip-group-element.js";
-import { VolumeIndicatorElement } from "./ui/volume-indicator/volume-indicator-element.js";
-import { VolumeIndicatorFillElement } from "./ui/volume-indicator/volume-indicator-fill-element.js";
-import { VolumeIndicatorValueElement } from "./ui/volume-indicator/volume-indicator-value-element.js";
-import { VolumePopoverElement } from "./ui/volume-popover/volume-popover-element.js";
-import { VolumeSliderElement } from "./ui/volume-slider/volume-slider-element.js";
+import { TooltipLabelElement } from "./ui/tooltip/label.js";
+import { TooltipShortcutElement } from "./ui/tooltip/shortcut.js";
+import { TooltipElement } from "./ui/tooltip/element.js";
+import { TooltipGroupElement } from "./ui/tooltip/group.js";
+import { VolumeIndicatorElement } from "./ui/volume-indicator/element.js";
+import { VolumeIndicatorFillElement } from "./ui/volume-indicator/fill.js";
+import { VolumeIndicatorValueElement } from "./ui/volume-indicator/value.js";
+import { VolumePopoverElement } from "./ui/volume-popover/element.js";
+import { VolumeSliderElement } from "./ui/volume-slider/element.js";
 import { DestroyMixin, ReactiveElement } from "@videojs/element";
 import { hasMetadata, isMediaAudioTrackCapable, isMediaBufferCapable, isMediaErrorCapable, isMediaLiveCapable, isMediaPauseCapable, isMediaPlaybackRateCapable, isMediaRemotePlaybackCapable, isMediaSeekCapable, isMediaSourceCapable, isMediaStreamTypeCapable, isMediaTextTrackCapable, isMediaVideoDimensionsCapable, isMediaVideoRenditionCapable, isMediaVolumeCapable, isQuerySelectorAllCapable } from "@videojs/media";
 import { createSelector, shallowEqual } from "@videojs/store";

package/dist/dev/internal/skins/default-audio/skin.css

@@ -442,6 +442,25 @@
     }
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="audio"]) .media-popup-surface {
+    background-color: var(--media-popover);
+    color: var(--media-popover-foreground);
+    box-shadow:
+      0 0 0 1px var(--media-surface-border, var(--media-border)),
+      var(--media-shadow-surface);
+    backdrop-filter: var(--media-backdrop-filter-surface);
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="audio"]) .media-popup-surface:after {
+    content: "";
+    z-index: 10;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: var(--media-shadow-surface-inset);
+    position: absolute;
+    inset: 0;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="audio"]) {
     .media-button-icon {
       width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
@@ -536,6 +555,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-buffer,
       &[data-dragging] .media-slider-buffer,
       &[data-seeking] .media-slider-buffer {
         transition-duration: 0s;
@@ -568,6 +588,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-fill,
       &[data-dragging] .media-slider-fill,
       &[data-seeking] .media-slider-fill {
         transition-duration: 0s;
@@ -626,6 +647,14 @@
       translate: -50% -50%;
     }
 
+    @scope (.media-slider) {
+      &:focus-within .media-slider-thumb {
+        transition-property: opacity, height, width, outline-offset, scale;
+        transition-duration: 0.15s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
     @scope (.media-slider) {
       &[data-dragging] .media-slider-thumb {
         transition-property: opacity, height, width, outline-offset, scale;
@@ -748,13 +777,17 @@
       }
     }
 
+    .media-slider[data-disabled] {
+      pointer-events: none;
+    }
+
     .media-slider[data-orientation="horizontal"] {
       height: var(--media-slider-height, calc(var(--media-spacing) * 8));
-      min-width: calc(var(--media-spacing) * 20);
+      min-width: calc(var(--media-spacing) * 18);
     }
 
     .media-slider[data-orientation="vertical"] {
-      height: calc(var(--media-spacing) * 20);
+      height: calc(var(--media-spacing) * 18);
       width: calc(var(--media-spacing) * 8);
       min-width: calc(var(--media-spacing) * 0);
     }
@@ -1173,7 +1206,7 @@
       height: calc(var(--media-spacing) * 1);
       min-width: var(--media-slider-preview-max-width);
       --media-slider-preview-max-height: var(--media-slider-preview-max-width);
-      --media-slider-preview-max-width: min(calc(var(--media-spacing) * 36), 100cqi);
+      --media-slider-preview-max-width: min(calc(var(--media-spacing) * 32), 100cqi);
       position: relative;
     }
 
@@ -1203,6 +1236,12 @@
       scale: 1;
     }
 
+    @container media-root (width >= 30rem) {
+      .media-slider-preview {
+        --media-slider-preview-max-width: min(calc(var(--media-spacing) * 40), 100cqi);
+      }
+    }
+
     @container media-root (width >= 42rem) {
       .media-slider-preview {
         --media-slider-preview-max-width: min(calc(var(--media-spacing) * 48), 100cqi);
@@ -1231,6 +1270,31 @@
     }
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="audio"]) .media-slider-preview-content {
+    max-width: var(--media-slider-preview-max-width);
+    transform-origin: bottom;
+    translate: -50% var(--media-hidden-preview-offset);
+    scale: var(--media-hidden-preview-scale) var(--media-hidden-preview-scale);
+    opacity: 0;
+    filter: blur(var(--media-hidden-blur));
+    transition-property: filter, opacity, scale;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    position: absolute;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="audio"])
+    :where(.media-slider):has(:focus-visible)
+    .media-slider-preview-content,
+  :where(.media-skin[data-theme="default"][data-preset="audio"])
+    :where(.media-slider-preview)[data-pointing]
+    .media-slider-preview-content {
+    opacity: 1;
+    filter: none;
+    scale: 1;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="audio"]) {
     .audio-time-slider-preview-content {
       bottom: calc(100% + var(--media-slider-preview-label-offset));
@@ -1270,7 +1334,7 @@
       z-index: 20;
       border-radius: var(--media-controls-radius);
       background-color: var(--media-controls);
-      padding: calc(var(--media-spacing) * 1);
+      padding: calc(var(--media-spacing) * 0.5);
       color: var(--media-controls-foreground);
       box-shadow:
         0 0 0 1px var(--media-surface-border, var(--media-border)),
@@ -1292,6 +1356,12 @@
       inset: 0;
     }
 
+    @container media-root (width >= 32rem) {
+      .audio-controls-content {
+        padding: calc(var(--media-spacing) * 1);
+      }
+    }
+
     .audio-controls-end,
     .audio-controls-start {
       align-items: center;
@@ -1340,8 +1410,21 @@
       outline-color: var(--media-ring);
     }
 
+    .media-time-toggle[aria-disabled="true"] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
     .media-time-value {
       font-variant-numeric: tabular-nums;
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration-slow);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .media-time-value[data-unavailable] {
+      opacity: 0.5;
     }
   }
 
@@ -1400,7 +1483,7 @@
     --media-backdrop-filter-indicator: blur(8px);
     --media-backdrop-filter-dialog: blur(16px) saturate(150%);
     --media-control-corner-shape: round;
-    --media-control-radius: calc(infinity * 1px);
+    --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
     --media-default-accent-color: oklch(100% 0 0);