@theoplayer/web-ui 1.15.0 → 2.0.0-beta.0

package/dist/THEOplayerUI.d.ts

@@ -1,17 +1,20 @@
 /*!
- * THEOplayer Open Video UI for Web (v1.15.0)
+ * THEOplayer Open Video UI for Web (v2.0.0-beta.0)
  * License: MIT
  */
-import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState, UIPlayerConfiguration, SourceDescription } from 'theoplayer/chromeless';
+import * as lit from 'lit';
+import { LitElement, HTMLTemplateResult, TemplateResult, PropertyValues } from 'lit';
+import { ChromelessPlayer, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VideoQuality, THEOplayerError, VendorCast, CastState, UIPlayerConfiguration, SourceDescription } from 'theoplayer/chromeless';
+import * as lit_html from 'lit-html';
+import { Ref } from 'lit/directives/ref.js';
 
 /**
- * `<theoplayer-control-bar>` - A horizontal control bar that can contain other controls.
- *
- * @group Components
+ * A horizontal control bar that can contain other controls.
  */
-declare class ControlBar extends HTMLElement {
-    constructor();
-    connectedCallback(): void;
+declare class ControlBar extends LitElement {
+    static styles: lit.CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -19,87 +22,33 @@ declare global {
     }
 }
 
-declare enum Attribute {
-    CONFIGURATION = "configuration",
-    SOURCE = "source",
-    AUTOPLAY = "autoplay",
-    MUTED = "muted",
-    FULLSCREEN = "fullscreen",
-    FULLWINDOW = "fullwindow",
-    FLUID = "fluid",
-    DEVICE_TYPE = "device-type",
-    MOBILE = "mobile",
-    TV = "tv",
-    TV_FOCUS = "tv-focus",
-    MOBILE_ONLY = "mobile-only",
-    MOBILE_HIDDEN = "mobile-hidden",
-    TV_ONLY = "tv-only",
-    TV_HIDDEN = "tv-hidden",
-    USER_IDLE = "user-idle",
-    USER_IDLE_TIMEOUT = "user-idle-timeout",
-    NO_AUTO_HIDE = "no-auto-hide",
-    DISABLED = "disabled",
-    INERT = "inert",
-    HIDDEN = "hidden",
-    PAUSED = "paused",
-    ENDED = "ended",
-    VOLUME_LEVEL = "volume-level",
-    CASTING = "casting",
-    LOADING = "loading",
-    STREAM_TYPE = "stream-type",
-    LIVE = "live",
-    LIVE_ONLY = "live-only",
-    LIVE_HIDDEN = "live-hidden",
-    LIVE_THRESHOLD = "live-threshold",
-    DVR_THRESHOLD = "dvr-threshold",
-    REMAINING = "remaining",
-    REMAINING_WHEN_LIVE = "remaining-when-live",
-    SHOW_DURATION = "show-duration",
-    SEEK_OFFSET = "seek-offset",
-    MENU = "menu",
-    MENU_OPENED = "menu-opened",
-    MENU_CLOSE_ON_INPUT = "menu-close-on-input",
-    ARIA_LABEL = "aria-label",
-    ARIA_LIVE = "aria-live",
-    ARIA_CHECKED = "aria-checked",
-    HAS_AUDIO = "has-audio",
-    HAS_SUBTITLES = "has-subtitles",
-    HAS_ERROR = "has-error",
-    HAS_FIRST_PLAY = "has-first-play",
-    HAS_TITLE = "has-title",
-    CAST_STATE = "cast-state",
-    TRACK_TYPE = "track-type",
-    SHOW_OFF = "show-off",
-    PLAYING_AD = "playing-ad",
-    SHOW_AD_MARKERS = "show-ad-markers",
-    CLICKTHROUGH = "clickthrough",
-    PROPERTY = "property",
-    VALUE = "value"
-}
-
+/** @deprecated */
 interface ButtonOptions {
-    template: HTMLTemplateElement;
+    /**
+     * @deprecated Override {@link Button.render} instead.
+     */
+    template?: HTMLTemplateElement;
 }
+/**
+ * @deprecated Override {@link Button.render} instead.
+ */
 declare function buttonTemplate(button: string, extraCss?: string): string;
 /**
- * `<theoplayer-button>` - A basic button.
+ * A basic button.
  *
  * @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
- * @group Components
  */
-declare class Button extends HTMLElement {
-    static get observedAttributes(): Attribute[];
+declare class Button extends LitElement {
+    static styles: lit.CSSResult[];
+    private readonly _template;
+    private _disabled;
     /**
      * Creates a basic button.
      *
      * By default, the button renders the contents of its direct children (i.e. it has a single unnamed `<slot>`).
-     * Subclasses can override this by passing a different {@link ButtonOptions.template} in the options,
-     * using {@link buttonTemplate} to correctly style the custom template.
-     *
-     * @param options - The options for this button.
+     * Subclasses can override this by overriding {@link render}.
      */
     constructor(options?: ButtonOptions);
-    protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
@@ -108,13 +57,13 @@ declare class Button extends HTMLElement {
      * When disabled, the button cannot be clicked.
      */
     get disabled(): boolean;
-    set disabled(disabled: boolean);
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    set disabled(value: boolean);
     private _enable;
     private _disable;
     private readonly _onClick;
     protected readonly _onKeyDown: (e: KeyboardEvent) => void;
     protected readonly _onKeyUp: (e: KeyboardEvent) => void;
+    protected render(): HTMLTemplateResult;
     /**
      * Handle a button click.
      *
@@ -128,33 +77,37 @@ declare global {
     }
 }
 
+/**
+ * @deprecated Override {@link LinkButton.render} instead.
+ */
 declare function linkButtonTemplate(button: string, extraCss?: string): string;
 /**
- * `<theoplayer-link-button>` - A {@link Button | button} that opens a hyperlink.
+ * A {@link Button | button} that opens a hyperlink.
  *
  * @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
- * @group Components
  */
-declare class LinkButton extends HTMLElement {
-    private readonly _linkEl;
-    static get observedAttributes(): Attribute[];
+declare class LinkButton extends LitElement {
+    static styles: lit.CSSResult[];
+    private readonly _template;
+    private _disabled;
+    private readonly _linkRef;
     constructor(options?: ButtonOptions);
-    protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     /**
      * Whether the button is disabled.
      *
      * When disabled, the button cannot be clicked.
      */
     get disabled(): boolean;
-    set disabled(disabled: boolean);
-    protected setLink(href: string, target: string): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    set disabled(value: boolean);
+    protected accessor href: string;
+    protected accessor target: string;
     private _enable;
     private _disable;
     private readonly _onKeyDown;
     private readonly _onClick;
+    protected render(): HTMLTemplateResult;
+    protected renderLinkContent(): HTMLTemplateResult;
     protected handleClick(): void;
 }
 declare global {
@@ -163,71 +116,18 @@ declare global {
     }
 }
 
-type Constructor<T> = abstract new (...args: any[]) => T;
-
-type DeviceType = 'desktop' | 'mobile' | 'tv';
-
-type StreamType = 'vod' | 'live' | 'dvr';
-
-/** @internal */
-declare const StateReceiverProps: "theoplayerUiObservedProperties";
-interface StateReceiverPropertyMap {
-    player: ChromelessPlayer | undefined;
-    fullscreen: boolean;
-    deviceType: DeviceType;
-    streamType: StreamType;
-    playbackRate: number;
-    activeVideoQuality: VideoQuality | undefined;
-    targetVideoQualities: VideoQuality[] | undefined;
-    error: THEOplayerError | undefined;
-    previewTime: number;
-}
 /**
- * A custom element that automatically receives selected state updates
- * from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
- *
- * Do not implement this interface directly, instead use {@link StateReceiverMixin}.
- *
- * @see {@link StateReceiverMixin}
- */
-interface StateReceiverElement extends Partial<StateReceiverPropertyMap>, Element {
-    /**
-     * The names of the properties this element will receive.
-     */
-    readonly [StateReceiverProps]: Array<keyof StateReceiverPropertyMap>;
-}
-/**
- * A [mixin class](https://www.typescriptlang.org/docs/handbook/mixins.html) to apply on the superclass of a custom element,
- * such that it will automatically receive selected state updates from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
- *
- * For each property name in `props`, the custom element *MUST* implement a corresponding property with a setter.
- * For example, if `props` equals `["player", "fullscreen"]`, then the element must have writable `player` and `fullscreen`
- * properties.
- *
- * @param base - The superclass for the new element class.
- * @param props - The names of the properties this element will receive.
- * @returns A class constructor that extends `base` and implements {@link StateReceiverElement}.
- * @see {@link StateReceiverElement}
- */
-declare function StateReceiverMixin<T extends Constructor<Element>>(base: T, props: Array<keyof StateReceiverPropertyMap>): T & Constructor<StateReceiverElement>;
-
-declare const PlayButton_base: typeof Button & Constructor<StateReceiverElement>;
-/**
- * `<theoplayer-play-button>` - A button that toggles whether the player is playing or paused.
+ * A button that toggles whether the player is playing or paused.
  *
  * @attribute `paused` (readonly) - Whether the player is paused. Reflects `ui.player.paused`.
  * @attribute `ended` (readonly) - Whether the player is ended. Reflects `ui.player.ended`.
- * @group Components
  */
-declare class PlayButton extends PlayButton_base {
-    static get observedAttributes(): Attribute[];
+declare class PlayButton extends Button {
+    static styles: lit.CSSResult[];
     private _player;
-    constructor();
     connectedCallback(): void;
-    get paused(): boolean;
-    set paused(paused: boolean);
-    get ended(): boolean;
-    set ended(ended: boolean);
+    accessor paused: boolean;
+    accessor ended: boolean;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _onPlay;
@@ -238,6 +138,7 @@ declare class PlayButton extends PlayButton_base {
     protected handleClick(): void;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -246,29 +147,27 @@ declare global {
 }
 
 type VolumeLevel = 'off' | 'low' | 'high';
-declare const MuteButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-mute-button>` - A button that toggles whether audio is muted or not.
+ * A button that toggles whether audio is muted or not.
  *
  * @attribute `volume-level` (readonly) - The volume level of the player.
  *   Can be "off" (muted), "low" (volume < 50%) or "high" (volume >= 50%).
- * @group Components
  */
-declare class MuteButton extends MuteButton_base {
-    static get observedAttributes(): Attribute[];
+declare class MuteButton extends Button {
+    static styles: lit.CSSResult[];
     private _player;
-    constructor();
     connectedCallback(): void;
     /**
      * The volume level of the player.
      */
-    get volumeLevel(): VolumeLevel;
+    accessor volumeLevel: VolumeLevel;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateFromPlayer;
     protected handleClick(): void;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -276,29 +175,25 @@ declare global {
     }
 }
 
-declare const SeekButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-seek-button>` - A button that seeks forward or backward by a fixed offset.
+ * A button that seeks forward or backward by a fixed offset.
  *
  * @attribute `seek-offset` - The offset (in seconds) by which to seek forward (if positive) or backward (if negative).
- * @group Components
  */
-declare class SeekButton extends SeekButton_base {
-    static get observedAttributes(): Attribute[];
+declare class SeekButton extends Button {
+    static styles: lit.CSSResult[];
     private _player;
-    private _offsetEl;
-    constructor();
     connectedCallback(): void;
     /**
      * The offset (in seconds) by which to seek forward (if positive) or backward (if negative).
      */
-    get seekOffset(): number;
-    set seekOffset(value: number);
+    accessor seekOffset: number;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     protected handleClick(): void;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
+    protected render(): lit_html.TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -306,32 +201,31 @@ declare global {
     }
 }
 
-declare const TimeDisplay_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
+type StreamType = 'vod' | 'live' | 'dvr';
+
 /**
- * `<theoplayer-time-display>` - A control that displays the current time of the stream.
+ * A control that displays the current time of the stream.
  *
  * @attribute `show-duration` - If set, also shows the duration of the stream.
  * @attribute `remaining` - If set, shows the remaining time of the stream. Not compatible with `show-duration`.
  * @attribute `remaining-when-live` - If set, and the stream is a livestream, shows the remaining time
  *   (until the live point) of the stream.
- * @group Components
  */
-declare class TimeDisplay extends TimeDisplay_base {
-    private readonly _spanEl;
+declare class TimeDisplay extends LitElement {
+    static styles: lit.CSSResult[];
     private _player;
-    static get observedAttributes(): Attribute[];
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
-    get streamType(): StreamType;
-    set streamType(streamType: StreamType);
+    accessor remaining: boolean;
+    accessor remainingWhenLive: boolean;
+    accessor showDuration: boolean;
+    accessor streamType: StreamType;
+    private accessor _currentTime;
+    private accessor _duration;
+    private accessor _endTime;
     private readonly _updateFromPlayer;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -339,24 +233,21 @@ declare global {
     }
 }
 
-declare const DurationDisplay_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-duration-display>` - A control that displays the duration of the stream.
- *
- * @group Components
+ * A control that displays the duration of the stream.
  */
-declare class DurationDisplay extends DurationDisplay_base {
-    private readonly _spanEl;
+declare class DurationDisplay extends LitElement {
+    static styles: lit.CSSResult[];
     private _player;
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
+    /**
+     * The current duration.
+     */
+    accessor duration: number;
     private readonly _updateFromPlayer;
+    protected render(): lit_html.TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -365,16 +256,12 @@ declare global {
 }
 
 /**
- * `<theoplayer-radio-button>` - A button that can be checked.
+ * A button that can be checked.
  *
  * When part of a {@link RadioGroup}, at most one button in the group can be checked.
- *
- * @group Components
  */
 declare class RadioButton extends Button {
-    static get observedAttributes(): Attribute[];
-    private _value;
-    constructor(options?: ButtonOptions);
+    private _checked;
     connectedCallback(): void;
     /**
      * Whether this radio button is checked.
@@ -384,10 +271,9 @@ declare class RadioButton extends Button {
     /**
      * The value associated with this radio button.
      */
-    get value(): any;
-    set value(value: any);
+    accessor value: any;
     protected handleClick(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected handleChange(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -395,12 +281,10 @@ declare global {
     }
 }
 
-declare const RadioGroup_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
+type DeviceType = 'desktop' | 'mobile' | 'tv';
+
 /**
- * `<theoplayer-radio-group>` - A group of {@link RadioButton}s. At most one button in the group can be checked.
+ * A group of {@link RadioButton}s. At most one button in the group can be checked.
  *
  * ## Behavior
  * This radio group implements the [roving tabindex](https://www.w3.org/WAI/ARIA/apg/example-index/radio/radio.html) pattern.
@@ -409,18 +293,22 @@ declare const RadioGroup_base: {
  *  - `Down`/`Right` arrow moves focus to the next radio button.
  *  - `Home` moves focus to the first radio button.
  *  - `End` moves focus to the last radio button.
- *
- * @group Components
  */
-declare class RadioGroup extends RadioGroup_base {
-    private _slot;
+declare class RadioGroup extends LitElement {
+    private readonly _slotRef;
     private _radioButtons;
+    private _value;
     constructor();
-    protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    get deviceType(): DeviceType;
-    set deviceType(deviceType: DeviceType);
+    protected firstUpdated(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    accessor deviceType: DeviceType;
+    /**
+     * The selected value.
+     */
+    get value(): any;
+    set value(value: any);
     private readonly _onSlotChange;
     private readonly _onKeyDown;
     get focusedRadioButton(): RadioButton | null;
@@ -432,10 +320,12 @@ declare class RadioGroup extends RadioGroup_base {
     private _nextRadioButton;
     private _focusPrevButton;
     private _focusNextButton;
-    setFocusedRadioButton(button: RadioButton | null): void;
+    private setFocusedRadioButton;
     private _unfocusAll;
-    setCheckedRadioButton(checkedButton: RadioButton | null): void;
+    private setCheckedRadioButton;
+    private updateCheckedButton;
     private readonly _onButtonChange;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -443,12 +333,19 @@ declare global {
     }
 }
 
+/** @deprecated */
 interface MenuOptions {
+    /**
+     * @deprecated Override {@link Menu.render} instead.
+     */
     template?: HTMLTemplateElement;
 }
+/**
+ * @deprecated Override {@link Menu.render} instead.
+ */
 declare function menuTemplate(heading: string, content: string, extraCss?: string): string;
 /**
- * `<theoplayer-menu>` - A menu that can be opened on top of the player.
+ * A menu that can be opened on top of the player.
  *
  * The menu has a heading at the top, with a {@link CloseMenuButton | close button} and a heading text.
  *
@@ -457,31 +354,27 @@ declare function menuTemplate(heading: string, content: string, extraCss?: strin
  * @attribute `menu-opened` (readonly) - Whether the menu is currently open.
  *
  * @slot `heading` - A slot for the menu's heading.
- *
- * @group Components
  */
-declare class Menu extends HTMLElement {
-    static get observedAttributes(): Attribute[];
-    private readonly _contentEl;
+declare class Menu extends LitElement {
+    static styles: lit.CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
+    private readonly _template;
+    private _menuOpened;
     /**
      * Creates a menu.
      *
      * By default, the button has an unnamed `<slot>` for its contents, and a named `"heading"` `<slot>` for its heading text.
-     * Subclasses can override this by passing a different {@link MenuOptions.template} in the options,
-     * using {@link menuTemplate} to correctly style the custom template.
-     *
-     * @param options - The options for this menu.
+     * Subclasses can override this by overriding {@link renderMenuHeading} and/or {@link renderMenuContent}.
      */
     constructor(options?: MenuOptions);
-    protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     /**
      * Whether to automatically close the menu whenever one of its controls
      * receives an input (e.g. when a radio button is clicked).
      */
-    get closeOnInput(): boolean;
-    set closeOnInput(value: boolean);
+    accessor closeOnInput: boolean;
+    private get menuOpened_();
+    private set menuOpened_(value);
     /**
      * Open the menu.
      */
@@ -490,8 +383,10 @@ declare class Menu extends HTMLElement {
      * Close the menu.
      */
     closeMenu(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private readonly _onContentInput;
+    protected render(): HTMLTemplateResult;
+    protected renderMenuHeading(): HTMLTemplateResult;
+    protected renderMenuContent(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -499,30 +394,41 @@ declare global {
     }
 }
 
+/** @deprecated */
 interface MenuGroupOptions {
+    /**
+     * @deprecated Override {@link MenuGroup.render} instead.
+     */
     template?: HTMLTemplateElement;
 }
+/**
+ * @deprecated Override {@link MenuGroup.render} instead.
+ */
 declare function menuGroupTemplate(content: string, extraCss?: string): string;
 /**
- * `<theoplayer-menu-group>` - A group of {@link Menu}s.
+ * A group of {@link Menu}s.
  *
- * This can contain multiple other menus, which can be opened with {@link MenuGroup.openMenu}.
+ * This can contain multiple other menus, which can be opened with {@link openMenu}.
  * When a {@link MenuButton} in one menu opens another menu in this group, it is opened as a "submenu".
  * When a submenu is closed, the menu that originally opened it is shown again.
  *
  * @attribute `menu-opened` (readonly) - Whether any menu in the group is currently open.
- * @group Components
  */
-declare class MenuGroup extends HTMLElement {
-    static get observedAttributes(): Attribute[];
-    private readonly _menuSlot;
+declare class MenuGroup extends LitElement {
+    static styles: lit.CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
+    private readonly _template;
+    constructor(options?: MenuGroupOptions);
+    private _menuOpened;
+    private get menuOpened_();
+    private set menuOpened_(value);
+    private accessor _menuSlot;
     private _menus;
     private readonly _openMenuStack;
-    constructor(options?: MenuGroupOptions);
-    protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected render(): TemplateResult;
+    protected firstUpdated(): void;
     /**
      * Get the menu with the given ID.
      *
@@ -588,21 +494,19 @@ declare global {
 }
 
 /**
- * `<theoplayer-menu-button>` - A menu button that opens a {@link Menu}.
+ * A menu button that opens a {@link Menu}.
  *
  * @attribute `menu` - The ID of the menu to open.
- * @group Components
  */
 declare class MenuButton extends Button {
-    static get observedAttributes(): Attribute[];
-    constructor(options?: Partial<ButtonOptions>);
+    private _menuId;
     connectedCallback(): void;
     /**
      * The ID of the menu to open.
      */
     get menu(): string | null;
     set menu(menuId: string | null);
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private accessor _ariaControls;
     protected handleClick(): void;
 }
 declare global {
@@ -612,17 +516,14 @@ declare global {
 }
 
 /**
- * `<theoplayer-menu-close-button>` - A button that closes its parent menu.
+ * A button that closes its parent menu.
  *
  * This button must be placed inside a {@link Menu | `<theoplayer-menu>`}.
- *
- * @group Components
  */
 declare class CloseMenuButton extends Button {
-    static get observedAttributes(): Attribute[];
-    constructor();
     connectedCallback(): void;
     protected handleClick(): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -631,15 +532,12 @@ declare global {
 }
 
 /**
- * `<theoplayer-media-track-radio-button>` - A radio button that shows the label of a given media track,
+ * A radio button that shows the label of a given media track,
  * and switches to that track when clicked.
- *
- * @group Components
  */
 declare class MediaTrackRadioButton extends RadioButton {
-    private _slotEl;
     private _track;
-    constructor();
+    private accessor _trackLabel;
     /**
      * The media track that is controlled by this radio button.
      */
@@ -648,7 +546,8 @@ declare class MediaTrackRadioButton extends RadioButton {
     private _updateFromTrack;
     private _updateTrack;
     private readonly _onTrackChange;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected handleChange(): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -657,51 +556,38 @@ declare global {
 }
 
 type TrackType = 'audio' | 'video' | 'subtitles';
-declare const TrackRadioGroup_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-track-radio-group>` - A radio group that shows a list of media or text tracks,
+ * A radio group that shows a list of media or text tracks,
  * from which the user can choose an active track.
  *
  * @attribute `track-type` - The track type of the available tracks. Can be "audio", "video" or "subtitles".
  * @attribute `show-off` - If set, shows an "off" button to disable all tracks.
  *   Can only be used with the "subtitles" track type.
- * @group Components
  */
-declare class TrackRadioGroup extends TrackRadioGroup_base {
-    static get observedAttributes(): Attribute[];
-    private readonly _radioGroup;
-    private _offButton;
+declare class TrackRadioGroup extends LitElement {
+    static styles: lit.CSSResult[];
     private _player;
-    private _tracksList;
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    private _trackType;
+    private accessor _tracksList;
     /**
      * The track type of the available tracks.
      */
     get trackType(): TrackType;
-    set trackType(value: TrackType);
+    set trackType(trackType: TrackType);
     /**
      * If set, shows an "off" button to disable all tracks.
      *
      * Can only be used with the `"subtitles"` track type.
      */
-    get showOffButton(): boolean;
-    set showOffButton(value: boolean);
+    accessor showOffButton: boolean;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private _getTracksList;
     private _updateTracksList;
     private _getTracks;
     private readonly _updateTracks;
-    private _createTrackButton;
-    private _updateOffButton;
     private readonly _onChange;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -711,13 +597,10 @@ declare global {
 
 /**
  * `<theoplayer-text-track-radio-button>` -A radio button that shows the label of a given text track, and switches to that track when clicked.
- *
- * @group Components
  */
 declare class TextTrackRadioButton extends RadioButton {
-    private _slotEl;
     private _track;
-    constructor();
+    private accessor _trackLabel;
     /**
      * The text track that is controlled by this radio button.
      */
@@ -726,7 +609,8 @@ declare class TextTrackRadioButton extends RadioButton {
     private _updateFromTrack;
     private _updateTrack;
     private readonly _onTrackChange;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected handleChange(): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -735,19 +619,17 @@ declare global {
 }
 
 /**
- * `<theoplayer-text-track-off-radio-button>` - A radio button that disables the active subtitle track when clicked.
- *
- * @group Components
+ * A radio button that disables the active subtitle track when clicked.
  */
 declare class TextTrackOffRadioButton extends RadioButton {
     private _trackList;
-    constructor();
     get trackList(): TextTracksList | undefined;
     set trackList(trackList: TextTracksList | undefined);
     private _updateFromTrackList;
     private _updateTrackList;
     private readonly _onTrackChange;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected handleChange(): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -767,35 +649,27 @@ interface TextTrackStyleMap {
     edgeStyle: EdgeStyle | undefined;
 }
 type TextTrackStyleOption = keyof TextTrackStyleMap;
-declare const TextTrackStyleRadioGroup_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-text-track-style-radio-group>` - A radio group that shows a list of values for a text track style option,
+ * A radio group that shows a list of values for a text track style option,
  * from which the user can choose a desired value.
  *
  * @attribute `property` - The property name of the text track style option. One of {@link TextTrackStyleOption}.
  * @slot {@link RadioButton} - The possible options for the text track style option.
  *   For example: `<theoplayer-radio-button value="#ff0000">Red</theoplayer-radio-button>`
- * @group Components
  */
-declare class TextTrackStyleRadioGroup extends TextTrackStyleRadioGroup_base {
-    static get observedAttributes(): Attribute[];
-    private readonly _radioGroup;
-    private readonly _optionsSlot;
+declare class TextTrackStyleRadioGroup extends LitElement {
+    static styles: lit.CSSResult[];
+    private readonly _radioGroupRef;
     private _player;
     private _textTrackStyle;
+    private _property;
     private _value;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected _upgradeProperty(prop: keyof this): void;
+    protected firstUpdated(): void;
     /**
      * The property name of the text track style option.
      */
     get property(): TextTrackStyleOption;
-    set property(value: TextTrackStyleOption);
+    set property(property: TextTrackStyleOption);
     /**
      * The currently chosen value for the text track style option.
      */
@@ -803,11 +677,10 @@ declare class TextTrackStyleRadioGroup extends TextTrackStyleRadioGroup_base {
     set value(value: string);
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
-    private readonly _updateChecked;
     private readonly _onChange;
     private readonly _updateFromPlayer;
     private _updateToPlayer;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -815,34 +688,26 @@ declare global {
     }
 }
 
-declare const TextTrackStyleDisplay_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-text-track-style-display>` - A control that displays the value of a single text track style option
+ * A control that displays the value of a single text track style option
  * in a human-readable format.
  *
  * @attribute `property` - The property name of the text track style option. One of {@link TextTrackStyleOption}.
- * @group Components
  */
-declare class TextTrackStyleDisplay extends TextTrackStyleDisplay_base {
-    static get observedAttributes(): Attribute[];
-    private readonly _spanEl;
+declare class TextTrackStyleDisplay extends LitElement {
     private _player;
+    private _property;
     private _textTrackStyle;
-    constructor();
-    connectedCallback(): void;
-    protected _upgradeProperty(prop: keyof this): void;
     /**
      * The property name of the text track style option.
      */
     get property(): TextTrackStyleOption;
-    set property(value: TextTrackStyleOption);
+    set property(property: TextTrackStyleOption);
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateFromPlayer;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected render(): HTMLTemplateResult;
+    private renderValue;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -851,14 +716,13 @@ declare global {
 }
 
 /**
- * `<theoplayer-text-track-style-menu>` - A menu to change the {@link theoplayer!TextTrackStyle | text track style} of the player.
+ * A menu to change the {@link theoplayer!TextTrackStyle | text track style} of the player.
  *
  * @slot `heading` - A slot for the menu's heading.
- *
- * @group Components
  */
 declare class TextTrackStyleMenu extends MenuGroup {
-    constructor();
+    static styles: lit.CSSResult[];
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -866,25 +730,23 @@ declare global {
     }
 }
 
-declare const LanguageMenu_base: typeof MenuGroup & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-language-menu>` - A menu to change the spoken language and subtitles of the stream.
+ * A menu to change the spoken language and subtitles of the stream.
  *
  * @slot `heading` - A slot for the menu's heading.
- *
- * @group Components
  */
-declare class LanguageMenu extends LanguageMenu_base {
+declare class LanguageMenu extends MenuGroup {
+    static styles: lit.CSSResult[];
     private _player;
     private _audioTrackList;
     private _textTrackList;
-    static get observedAttributes(): Attribute[];
-    constructor();
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
+    private accessor _hasAudioTracks;
+    private accessor _hasSubtitles;
     private readonly _updateAudioTracks;
     private readonly _updateTextTracks;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -892,24 +754,22 @@ declare global {
     }
 }
 
-declare const LanguageMenuButton_base: typeof MenuButton & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-language-menu-button>` - A menu button that opens a {@link LanguageMenu}.
+ * A menu button that opens a {@link LanguageMenu}.
  *
  * When there are no alternative audio languages or subtitles, this button automatically hides itself.
  *
  * @attribute `menu` - The ID of the language menu.
- * @group Components
  */
-declare class LanguageMenuButton extends LanguageMenuButton_base {
+declare class LanguageMenuButton extends MenuButton {
     private _player;
     private _audioTrackList;
     private _textTrackList;
-    constructor();
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateTracks;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -917,28 +777,20 @@ declare global {
     }
 }
 
-declare const PlaybackRateRadioGroup_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-playback-rate-radio-group>` - A radio group that shows a list of playback rates,
+ * A radio group that shows a list of playback rates,
  * from which the user can choose a desired playback rate.
  *
  * @slot {@link RadioButton} - The possible options for the playback rate.
  *   The value of each radio button must be a valid number.
  *   For example: `<theoplayer-radio-button value="2">2x</theoplayer-radio-button>`
- * @group Components
  */
-declare class PlaybackRateRadioGroup extends PlaybackRateRadioGroup_base {
-    private readonly _radioGroup;
-    private readonly _optionsSlot;
+declare class PlaybackRateRadioGroup extends LitElement {
+    static styles: lit.CSSResult[];
+    private readonly _radioGroupRef;
     private _player;
     private _value;
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    protected firstUpdated(): void;
     /**
      * The currently chosen playback rate.
      */
@@ -946,9 +798,9 @@ declare class PlaybackRateRadioGroup extends PlaybackRateRadioGroup_base {
     set value(value: number);
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
-    private readonly _updateChecked;
     private readonly _onChange;
     private readonly _updateFromPlayer;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -957,14 +809,13 @@ declare global {
 }
 
 /**
- * `<theoplayer-playback-rate-menu-button>` - A menu button that opens a [playback rate menu]{@link PlaybackRateMenu}.
+ * A menu button that opens a [playback rate menu]{@link PlaybackRateMenu}.
  *
  * @attribute menu - The ID of the playback rate menu.
- * @group Components
  */
 declare class PlaybackRateMenuButton extends MenuButton {
-    constructor();
     connectedCallback(): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -973,14 +824,13 @@ declare global {
 }
 
 /**
- * `<theoplayer-playback-rate-menu>` - A menu to change the playback rate of the player.
+ * A menu to change the playback rate of the player.
  *
  * @slot `heading` - A slot for the menu's heading.
- *
- * @group Components
  */
 declare class PlaybackRateMenu extends Menu {
-    constructor();
+    protected renderMenuHeading(): HTMLTemplateResult;
+    protected renderMenuContent(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -988,23 +838,15 @@ declare global {
     }
 }
 
-declare const PlaybackRateDisplay_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-playback-rate-display>` - A control that displays the current playback rate of the player.
- *
- * @group Components
+ * A control that displays the current playback rate of the player.
  */
-declare class PlaybackRateDisplay extends PlaybackRateDisplay_base {
-    private readonly _spanEl;
-    private _playbackRate;
-    constructor();
-    connectedCallback(): void;
-    protected _upgradeProperty(prop: keyof this): void;
-    get playbackRate(): number;
-    set playbackRate(value: number);
+declare class PlaybackRateDisplay extends LitElement {
+    /**
+     * The current playback rate.
+     */
+    accessor playbackRate: number;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1012,27 +854,13 @@ declare global {
     }
 }
 
-declare const ActiveQualityDisplay_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-active-quality-display>` - A control that displays the name of the active video quality.
- *
- * @group Components
+ * A control that displays the name of the active video quality.
  */
-declare class ActiveQualityDisplay extends ActiveQualityDisplay_base {
-    private readonly _spanEl;
-    private _activeVideoQuality;
-    private _targetVideoQualities;
-    constructor();
-    connectedCallback(): void;
-    protected _upgradeProperty(prop: keyof this): void;
-    get activeVideoQuality(): VideoQuality | undefined;
-    set activeVideoQuality(quality: VideoQuality | undefined);
-    get targetVideoQualities(): VideoQuality[] | undefined;
-    set targetVideoQualities(qualities: VideoQuality[] | undefined);
-    private update_;
+declare class ActiveQualityDisplay extends LitElement {
+    accessor activeVideoQuality: VideoQuality | undefined;
+    accessor targetVideoQualities: VideoQuality[] | undefined;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1041,16 +869,13 @@ declare global {
 }
 
 /**
- * `<theoplayer-quality-radio-button>` - A radio button that shows the label of a given video quality,
+ * A radio button that shows the label of a given video quality,
  * and switches the video track's {@link theoplayer!MediaTrack.targetQuality | target quality} to that quality when clicked.
- *
- * @group Components
  */
 declare class QualityRadioButton extends RadioButton {
-    private _slotEl;
     private _track;
     private _quality;
-    constructor();
+    private accessor _qualityLabel;
     /**
      * The video track containing the quality being controlled.
      */
@@ -1063,8 +888,9 @@ declare class QualityRadioButton extends RadioButton {
     set quality(quality: VideoQuality | undefined);
     private readonly _updateFromTrack;
     private readonly _updateFromQuality;
+    protected handleChange(): void;
     private _updateTargetQuality;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1072,30 +898,22 @@ declare global {
     }
 }
 
-declare const QualityRadioGroup_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-quality-radio-group>` - A radio group that shows a list of available video qualities,
+ * A radio group that shows a list of available video qualities,
  * from which the user can choose a desired target quality.
- *
- * @group Components
  */
-declare class QualityRadioGroup extends QualityRadioGroup_base {
-    private readonly _radioGroup;
+declare class QualityRadioGroup extends LitElement {
+    static styles: lit.CSSResult[];
     private _player;
     private _videoTracks;
-    private _track;
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    private accessor _track;
+    protected firstUpdated(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _onChange;
     private readonly _updateTrack;
-    private readonly _update;
+    private _update;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1103,19 +921,15 @@ declare global {
     }
 }
 
-declare const TextTrackStyleResetButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-text-track-style-reset-button>` - A button that resets the text track style.
- *
- * @group Components
+ * A button that resets the text track style.
  */
-declare class TextTrackStyleResetButton extends TextTrackStyleResetButton_base {
-    static get observedAttributes(): Attribute[];
+declare class TextTrackStyleResetButton extends Button {
     private _player;
-    constructor();
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     protected handleClick(): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1124,15 +938,14 @@ declare global {
 }
 
 /**
- * `<theoplayer-settings-menu>` - A menu to change the settings of the player,
+ * A menu to change the settings of the player,
  * such as the active video quality and the playback speed.
  *
  * @slot `heading` - A slot for the menu's heading.
- *
- * @group Components
  */
 declare class SettingsMenu extends MenuGroup {
-    constructor();
+    static styles: lit.CSSResult[];
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1141,14 +954,13 @@ declare global {
 }
 
 /**
- * `<theoplayer-settings-menu-button>` - A menu button that opens a {@link SettingsMenu}.
+ * A menu button that opens a {@link SettingsMenu}.
  *
  * @attribute `menu` - The ID of the settings menu.
- * @group Components
  */
 declare class SettingsMenuButton extends MenuButton {
-    constructor();
     connectedCallback(): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1156,21 +968,17 @@ declare global {
     }
 }
 
-declare const FullscreenButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-fullscreen-button>` - A button that toggles fullscreen.
- *
- * @group Components
+ * A button that toggles fullscreen.
  */
-declare class FullscreenButton extends FullscreenButton_base {
-    static get observedAttributes(): Attribute[];
-    constructor();
+declare class FullscreenButton extends Button {
+    static styles: lit.CSSResult[];
     connectedCallback(): void;
-    get fullscreen(): boolean;
-    set fullscreen(fullscreen: boolean);
+    accessor fullscreen: boolean;
     protected handleClick(): void;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1185,14 +993,6 @@ declare class ColorStops {
     toGradientStops(): string;
 }
 
-interface RangeOptions {
-    template: HTMLTemplateElement;
-}
-declare function rangeTemplate(range: string, extraCss?: string): string;
-declare const Range_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
  * A slider to select a value from a range.
  *
@@ -1203,14 +1003,18 @@ declare const Range_base: {
  *
  * @group Components
  */
-declare abstract class Range extends Range_base {
-    static get observedAttributes(): Attribute[];
-    protected readonly _rangeEl: HTMLInputElement;
-    protected readonly _pointerEl: HTMLElement;
+declare abstract class Range extends LitElement {
+    static styles: lit.CSSResult[];
+    protected readonly _rangeRef: Ref<HTMLInputElement>;
+    private _min;
+    private _max;
+    private _value;
+    private _disabled;
+    private _hidden;
+    private _inert;
     private _rangeWidth;
     private _thumbWidth;
-    constructor(options: RangeOptions);
-    protected _upgradeProperty(prop: keyof this): void;
+    private accessor _pointerWidth;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
@@ -1220,6 +1024,11 @@ declare abstract class Range extends Range_base {
      */
     get disabled(): boolean;
     set disabled(disabled: boolean);
+    /**
+     * Whether the range is hidden.
+     */
+    get hidden(): boolean;
+    set hidden(hidden: boolean);
     /**
      * Whether the range is inert.
      *
@@ -1247,14 +1056,12 @@ declare abstract class Range extends Range_base {
      *
      * If set to `"any"`, the value can change with arbitrary precision.
      */
-    get step(): number | 'any';
-    set step(step: number | 'any');
-    get deviceType(): DeviceType;
-    set deviceType(deviceType: DeviceType);
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    accessor step: number | 'any';
+    accessor deviceType: DeviceType;
+    accessor ariaLive: string | null;
     private readonly _onInput;
     protected handleInput(): void;
-    protected update(useCachedWidth?: boolean): void;
+    protected _updateRange(useCachedWidth?: boolean): void;
     /**
      * The value for the `aria-label` attribute of the `<input type="range">` element.
      */
@@ -1281,14 +1088,12 @@ declare abstract class Range extends Range_base {
     protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
     private readonly _onKeyDown;
     protected handleKeyDown_(e: KeyboardEvent): void;
+    protected render(): HTMLTemplateResult;
+    protected renderRangeExtras(): HTMLTemplateResult;
 }
 
-declare const PreviewThumbnail_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-preview-thumbnail>` - A display that shows the thumbnail image at the current preview time
+ * A display that shows the thumbnail image at the current preview time
  * of a {@link TimeRange | `<theoplayer-time-range>`}.
  *
  * The first `metadata` text track whose label equals `"thumbnails"` is used as source for the thumbnails.
@@ -1297,20 +1102,19 @@ declare const PreviewThumbnail_base: {
  * (e.g. `#xywh=180,80,60,40`), then the thumbnail is clipped to the rectangle defined by that fragment.
  *
  * If the stream does not contain thumbnails, then this display shows nothing.
- * @group Components
  */
-declare class PreviewThumbnail extends PreviewThumbnail_base {
-    private readonly _canvasEl;
-    private readonly _canvasContext;
+declare class PreviewThumbnail extends LitElement {
+    static styles: lit.CSSResult[];
+    private readonly _canvasRef;
+    private _canvasContext;
     private readonly _thumbnailImageSource;
     private _player;
     private _textTrackList;
     private _previewTime;
     private _thumbnailTextTrack;
     private _lastLoadedThumbnailUrl;
+    private accessor _thumbnailVisible;
     constructor();
-    protected _upgradeProperty(prop: keyof this): void;
-    connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     get previewTime(): number;
@@ -1320,6 +1124,7 @@ declare class PreviewThumbnail extends PreviewThumbnail_base {
     private loadThumbnailImage_;
     private showThumbnail_;
     private hideThumbnail_;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1327,34 +1132,26 @@ declare global {
     }
 }
 
-declare const PreviewTimeDisplay_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-preview-time-display>` - A display that shows the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
+ * A display that shows the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
  *
  * @attribute `remaining` - If set, shows the remaining time of the stream.
  * @attribute `remaining-when-live` - If set, and the stream is a livestream, shows the remaining time
  *   (until the live point) of the stream.
- * @group Components
  */
-declare class PreviewTimeDisplay extends PreviewTimeDisplay_base {
-    private readonly _spanEl;
-    private _previewTime;
+declare class PreviewTimeDisplay extends LitElement {
+    static styles: lit.CSSResult[];
     private _player;
-    static get observedAttributes(): Attribute[];
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
-    get previewTime(): number;
-    set previewTime(previewTime: number);
-    get streamType(): StreamType;
-    set streamType(streamType: StreamType);
+    accessor previewTime: number;
+    accessor remaining: boolean;
+    accessor remainingWhenLive: boolean;
+    accessor streamType: StreamType;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
-    private readonly _update;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private accessor _endTime;
+    private readonly _updateFromPlayer;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1362,21 +1159,20 @@ declare global {
     }
 }
 
-declare const TimeRange_base: typeof Range & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-time-range>` - A seek bar, showing the current time of the player,
+ * A seek bar, showing the current time of the player,
  * and which seeks the player when clicked or dragged.
  *
  * @slot `preview` - A slot holding a preview of the seek time, shown while hovering the seek bar.
  *   By default, this shows the {@link PreviewTimeDisplay | preview time} and
  *   the {@link PreviewThumbnail | preview thumbnail}.
- * @group Components
  */
-declare class TimeRange extends TimeRange_base {
-    static get observedAttributes(): Attribute[];
-    private readonly _previewRailEl;
+declare class TimeRange extends Range {
+    static styles: lit.CSSResult[];
     private readonly _previewBoxEl;
     private _player;
+    private _streamType;
+    private _showAdMarkers;
     private _ads;
     private _pausedWhileScrubbing;
     private _autoAdvanceId;
@@ -1385,16 +1181,18 @@ declare class TimeRange extends TimeRange_base {
     private _lastPlaybackRate;
     constructor();
     connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     get streamType(): StreamType;
     set streamType(streamType: StreamType);
+    get showAdMarkers(): boolean;
+    set showAdMarkers(showAdMarkers: boolean);
     private readonly _updateFromPlayer;
     private updateDisabled_;
     protected getAriaLabel(): string;
     protected getAriaValueText(): string;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     protected handleInput(): void;
     private readonly _pauseOnScrubStart;
     private readonly _playOnScrubEnd;
@@ -1402,10 +1200,12 @@ declare class TimeRange extends TimeRange_base {
     private needToUpdateEveryFrame_;
     private readonly _toggleAutoAdvance;
     private readonly _autoAdvanceWhilePlaying;
+    private accessor _previewRailTransform;
     protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
     protected getBarColors(): ColorStops;
     private readonly _onAdChange;
     protected handleKeyDown_(e: KeyboardEvent): void;
+    protected renderRangeExtras(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1413,14 +1213,11 @@ declare global {
     }
 }
 
-declare const VolumeRange_base: typeof Range & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-volume-range>` - A volume slider, showing the current audio volume of the player,
+ * A volume slider, showing the current audio volume of the player,
  * and which changes the volume when clicked or dragged.
- *
- * @group Components
  */
-declare class VolumeRange extends VolumeRange_base {
+declare class VolumeRange extends Range {
     private _player;
     constructor();
     get player(): ChromelessPlayer | undefined;
@@ -1436,30 +1233,18 @@ declare global {
     }
 }
 
-declare const ErrorDisplay_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-error-display>` - A screen that shows the details of a fatal player error.
- *
- * @group Components
+ * A screen that shows the details of a fatal player error.
  */
-declare class ErrorDisplay extends ErrorDisplay_base {
-    private readonly _messageSlot;
-    private _error;
-    static get observedAttributes(): Attribute[];
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
-    connectedCallback(): void;
+declare class ErrorDisplay extends LitElement {
+    static styles: lit.CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
     /**
      * The error.
      */
-    get error(): THEOplayerError | undefined;
-    set error(error: THEOplayerError | undefined);
-    get fullscreen(): boolean;
-    set fullscreen(fullscreen: boolean);
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    accessor error: THEOplayerError | undefined;
+    accessor fullscreen: boolean;
+    protected render(): lit_html.TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1475,7 +1260,7 @@ declare global {
  */
 declare class CastButton extends Button {
     private _castApi;
-    static get observedAttributes(): Attribute[];
+    private _castState;
     constructor(options?: ButtonOptions);
     connectedCallback(): void;
     /**
@@ -1487,25 +1272,25 @@ declare class CastButton extends Button {
      * The current cast state.
      */
     get castState(): CastState;
+    private set castState(value);
     protected handleClick(): void;
     private readonly _updateCastState;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
 
-declare const ChromecastButton_base: typeof CastButton & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-chromecast-button>` - A button to start and stop casting using Chromecast.
- *
- * @group Components
+ * A button to start and stop casting using Chromecast.
  */
-declare class ChromecastButton extends ChromecastButton_base {
+declare class ChromecastButton extends CastButton {
+    static styles: lit.CSSResult[];
     private _player;
+    private readonly _buttonId;
     constructor();
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
+    protected render(): lit_html.TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1513,25 +1298,19 @@ declare global {
     }
 }
 
-declare const ChromecastDisplay_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-chromecast-display>` - A control that displays the casting status while using Chromecast.
- *
- * @group Components
+ * A control that displays the casting status while using Chromecast.
  */
-declare class ChromecastDisplay extends ChromecastDisplay_base {
-    private readonly _receiverNameEl;
+declare class ChromecastDisplay extends LitElement {
+    static styles: lit.CSSResult[];
     private _player;
     private _castApi;
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
+    private accessor _receiverName;
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateFromPlayer;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1539,20 +1318,18 @@ declare global {
     }
 }
 
-declare const AirPlayButton_base: typeof CastButton & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-airplay-button>` - A button to start and stop casting using AirPlay.
- *
- * @group Components
+ * A button to start and stop casting using AirPlay.
  */
-declare class AirPlayButton extends AirPlayButton_base {
+declare class AirPlayButton extends CastButton {
+    static styles: lit.CSSResult[];
     private _player;
-    constructor();
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
+    protected render(): lit_html.TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1560,26 +1337,19 @@ declare global {
     }
 }
 
-declare const LoadingIndicator_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-loading-indicator>` - An indicator that shows whether the player is currently waiting for more data to resume playback.
+ * An indicator that shows whether the player is currently waiting for more data to resume playback.
  *
  * @attribute `loading` (readonly) - Whether the player is waiting for more data. If set, the indicator is shown.
- * @group Components
  */
-declare class LoadingIndicator extends LoadingIndicator_base {
+declare class LoadingIndicator extends LitElement {
+    static styles: lit.CSSResult[];
     private _player;
-    static get observedAttributes(): Attribute[];
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
-    connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
+    accessor loading: boolean;
     private readonly _updateFromPlayer;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1587,31 +1357,26 @@ declare global {
     }
 }
 
-declare const GestureReceiver_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-gesture-receiver>` - An overlay that receives and handles gestures on the player.
+ * An overlay that receives and handles gestures on the player.
  *
  * On desktop devices, this plays or pauses the player whenever it is clicked.
  * On mobile devices, this currently does nothing.
- *
- * @group Components
  */
-declare class GestureReceiver extends GestureReceiver_base {
+declare class GestureReceiver extends LitElement {
+    static styles: lit.CSSResult[];
     private _player;
     private _playerElement;
     private _pointerType;
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
+    accessor deviceType: DeviceType;
     private readonly _onPointerDown;
     private readonly _onClick;
     handleTap(_event: MouseEvent): void;
     handleMouseClick(_event: MouseEvent): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1619,35 +1384,30 @@ declare global {
     }
 }
 
-declare const LiveButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-live-button>` - A button that shows whether the player is currently playing at the live point,
+ * A button that shows whether the player is currently playing at the live point,
  * and seeks to the live point when clicked.
  *
  * @attribute `live-threshold` - The maximum distance (in seconds) from the live point that the player's current time
  *   can be for it to still be considered "at the live point". If unset, defaults to 10 seconds.
  * @attribute `live` (readonly) - Whether the player is considered to be playing at the live point.
- * @group Components
  */
-declare class LiveButton extends LiveButton_base {
-    static get observedAttributes(): Attribute[];
+declare class LiveButton extends Button {
+    static styles: lit.CSSResult[];
     private _player;
-    constructor();
+    private _liveThreshold;
     connectedCallback(): void;
-    get paused(): boolean;
-    set paused(paused: boolean);
-    get streamType(): StreamType;
-    set streamType(streamType: StreamType);
+    accessor paused: boolean;
+    accessor streamType: StreamType;
     get liveThreshold(): number;
     set liveThreshold(value: number);
-    get live(): boolean;
-    set live(live: boolean);
+    accessor live: boolean;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _updatePaused;
     private readonly _updateLive;
     protected handleClick(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1656,7 +1416,7 @@ declare global {
 }
 
 /**
- * `<theoplayer-slot-container>` - A container that can be assigned to a slot,
+ * A container that can be assigned to a slot,
  * and behaves as if all its children are directly assigned to that slot.
  *
  * This behaves approximately like a regular `<div>` with style `display: contents`,
@@ -1666,12 +1426,11 @@ declare global {
  *
  * This is an internal component, used mainly by Open Video UI for React.
  * You shouldn't need this under normal circumstances.
- *
- * @group Components
  * @internal
  */
-declare class SlotContainer extends HTMLElement {
-    constructor();
+declare class SlotContainer extends LitElement {
+    static styles: lit.CSSResult[];
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1679,26 +1438,20 @@ declare global {
     }
 }
 
-declare const AdDisplay_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-ad-countdown>` - A control that shows when an advertisement is playing,
+ * A control that shows when an advertisement is playing,
  * and the number of the current ad in the ad break (if the break has multiple ads).
- *
- * @group Components
  */
-declare class AdDisplay extends AdDisplay_base {
-    private readonly _spanEl;
+declare class AdDisplay extends LitElement {
+    static styles: lit.CSSResult[];
     private _player;
     private _ads;
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
+    private accessor _text;
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateFromPlayer;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1706,26 +1459,19 @@ declare global {
     }
 }
 
-declare const AdCountdown_base: {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-} & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-ad-countdown>` - A control that displays the remaining time of the current ad break.
- *
- * @group Components
+ * A control that displays the remaining time of the current ad break.
  */
-declare class AdCountdown extends AdCountdown_base {
-    private readonly _spanEl;
+declare class AdCountdown extends LitElement {
+    static styles: lit.CSSResult[];
     private _player;
     private _ads;
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
-    connectedCallback(): void;
+    private accessor _maxRemainingDuration;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _onAdChange;
     private readonly _update;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1733,25 +1479,22 @@ declare global {
     }
 }
 
-declare const AdClickThroughButton_base: typeof LinkButton & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-ad-clickthrough-button>` - A button to open the advertisement's click-through webpage.
- *
- * @group Components
+ * A button to open the advertisement's click-through webpage.
  */
-declare class AdClickThroughButton extends AdClickThroughButton_base {
+declare class AdClickThroughButton extends LinkButton {
     private _player;
     private _ads;
-    static get observedAttributes(): Attribute[];
+    private _clickThrough;
     constructor();
     connectedCallback(): void;
     get clickThrough(): string | null;
     set clickThrough(clickThrough: string | null);
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private readonly _updateFromPlayer;
     protected handleClick(): void;
+    protected renderLinkContent(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1759,27 +1502,23 @@ declare global {
     }
 }
 
-declare const AdSkipButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * `<theoplayer-ad-skip-button>` - A button that skips the current advertisement (if skippable).
+ * A button that skips the current advertisement (if skippable).
  * If the ad cannot be skipped yet, it shows the remaining time until it can be skipped.
- *
- * @group Components
  */
-declare class AdSkipButton extends AdSkipButton_base {
-    private readonly _countdownEl;
-    private readonly _skipEl;
+declare class AdSkipButton extends Button {
+    static styles: lit.CSSResult[];
     private _player;
     private _ads;
-    static get observedAttributes(): Attribute[];
-    constructor();
+    private accessor _showCountdown;
+    private accessor _timeToSkip;
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     protected handleClick(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private readonly _onAdChange;
     private readonly _update;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -1787,6 +1526,65 @@ declare global {
     }
 }
 
+type Constructor<T> = abstract new (...args: any[]) => T;
+
+/** @internal */
+declare const StateReceiverProps: "theoplayerUiObservedProperties";
+interface StateReceiverPropertyMap {
+    player: ChromelessPlayer | undefined;
+    fullscreen: boolean;
+    deviceType: DeviceType;
+    streamType: StreamType;
+    playbackRate: number;
+    activeVideoQuality: VideoQuality | undefined;
+    targetVideoQualities: VideoQuality[] | undefined;
+    error: THEOplayerError | undefined;
+    previewTime: number;
+}
+/**
+ * A custom element that automatically receives selected state updates
+ * from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
+ *
+ * Do not implement this interface directly, instead use {@link stateReceiver} or {@link StateReceiverMixin}.
+ *
+ * @see {@link stateReceiver}
+ * @see {@link StateReceiverMixin}
+ */
+interface StateReceiverElement extends Partial<StateReceiverPropertyMap>, Element {
+    /**
+     * The names of the properties this element will receive.
+     */
+    readonly [StateReceiverProps]: Array<keyof StateReceiverPropertyMap>;
+}
+/**
+ * Decorates a custom element class, such that it will automatically receive selected state updates
+ * from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
+ *
+ * For each property name in `props`, the custom element *MUST* implement a corresponding property with a setter.
+ * For example, if `props` equals `["player", "fullscreen"]`, then the element must have writable `player` and `fullscreen`
+ * properties.
+ *
+ * @param props - The names of the properties this element will receive.
+ * @returns A class decorator.
+ * @see {@link StateReceiverElement}
+ */
+declare const stateReceiver: (props: Array<keyof StateReceiverPropertyMap>) => (target: Constructor<Element>, _context: ClassDecoratorContext<Constructor<Element>>) => void;
+/**
+ * A [mixin class](https://www.typescriptlang.org/docs/handbook/mixins.html) to apply on the superclass of a custom element,
+ * such that it will automatically receive selected state updates from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
+ *
+ * For each property name in `props`, the custom element *MUST* implement a corresponding property with a setter.
+ * For example, if `props` equals `["player", "fullscreen"]`, then the element must have writable `player` and `fullscreen`
+ * properties.
+ *
+ * @param base - The superclass for the new element class.
+ * @param props - The names of the properties this element will receive.
+ * @returns A class constructor that extends `base` and implements {@link StateReceiverElement}.
+ * @see {@link StateReceiverElement}
+ * @deprecated Use {@link stateReceiver} decorator instead.
+ */
+declare function StateReceiverMixin<T extends Constructor<Element>>(base: T, props: Array<keyof StateReceiverPropertyMap>): T & Constructor<StateReceiverElement>;
+
 declare enum ExtensionSlot {
     TopControlBar = "top-control-bar",
     BottomControlBar = "bottom-control-bar",
@@ -1796,7 +1594,7 @@ declare enum ExtensionSlot {
 declare const READY_EVENT: "theoplayerready";
 
 /**
- * `<theoplayer-ui>` - The container element for a THEOplayer UI.
+ * The container element for a THEOplayer UI.
  *
  * This element provides a basic layout structure for a general player UI, and handles the creation and management
  * of a {@link theoplayer!ChromelessPlayer | THEOplayer player instance} for this UI.
@@ -1852,31 +1650,32 @@ declare const READY_EVENT: "theoplayerready";
  * @slot `top-chrome` - A slot for controls at the top of the player.
  *   Can be used to display the stream's title, or for a cast button ({@link ChromecastButton | `<theoplayer-chromecast-button>`}).
  * @slot `middle-chrome` - A slot for controls in the middle of the player (between the top and bottom chrome).
- * @slot `centered-chrome` - A slot for controls centered on the player, on top of other controls.
- * @slot `centered-loading` - A slot for a loading indicator centered on the player, on top of other controls
+ * @slot `centered-chrome` - A slot for controls in the center of the player, layered on top of other controls.
+ * @slot `centered-loading` - A slot for a loading indicator in the center of the player, layered on top of other controls
  *   but behind the centered chrome.
  * @slot `menu` - A slot for extra menus (see {@link Menu | `<theoplayer-menu>`}).
  * @slot `error` - A slot for an error display, to show when the player encounters a fatal error
  *   (see {@link ErrorDisplay | `<theoplayer-error-display>`}).
- * @group Components
  */
-declare class UIContainer extends HTMLElement {
+declare class UIContainer extends LitElement {
+    static styles: lit.CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
     /**
      * Fired when the backing player is created, and the {@link UIContainer.player} property is set.
      *
      * @group Events
      */
     static READY_EVENT: typeof READY_EVENT;
-    static get observedAttributes(): Attribute[];
     private _configuration;
-    private readonly _playerEl;
-    private readonly _menuEl;
-    private readonly _menuGroup;
+    private readonly _playerRef;
+    private readonly _menuRef;
+    private readonly _menuGroupRef;
+    private _menuOpened;
     private _menuOpener;
-    private readonly _topChromeEl;
-    private readonly _topChromeSlot;
-    private readonly _bottomChromeEl;
-    private readonly _bottomChromeSlot;
+    private readonly _topChromeRef;
+    private readonly _topChromeSlotRef;
+    private readonly _bottomChromeRef;
+    private readonly _bottomChromeSlotRef;
     private _pointerType;
     private _lastPointerUpTime;
     private readonly _mutationObserver;
@@ -1884,8 +1683,20 @@ declare class UIContainer extends HTMLElement {
     private readonly _stateReceivers;
     private _player;
     private _source;
+    private _muted;
+    private _autoplay;
+    private _fullscreen;
+    private _deviceType;
+    private _streamType;
+    private _fluid;
+    private _userIdle;
+    private _userIdleTimeout;
     private _isUserActive;
     private _userIdleTimer;
+    private _paused;
+    private _ended;
+    private _casting;
+    private _dvrThreshold;
     private _previewTime;
     private _activeVideoTrack;
     /**
@@ -1897,7 +1708,6 @@ declare class UIContainer extends HTMLElement {
      *   Can also be set later on through the {@link UIContainer.configuration} property.
      */
     constructor(configuration?: UIPlayerConfiguration);
-    private _upgradeProperty;
     /**
      * The underlying THEOplayer player instance.
      *
@@ -1937,18 +1747,22 @@ declare class UIContainer extends HTMLElement {
      * Whether the UI is in fullscreen mode.
      */
     get fullscreen(): boolean;
+    private set fullscreen(value);
     /**
      * Whether the player is paused.
      */
     get paused(): boolean;
+    private set paused(value);
     /**
      * Whether the player is ended.
      */
     get ended(): boolean;
+    private set ended(value);
     /**
      * Whether the player is casting to a remote receiver.
      */
     get casting(): boolean;
+    private set casting(value);
     /**
      * Whether the user has stopped interacting with the UI and is considered to be "idle".
      */
@@ -1959,11 +1773,12 @@ declare class UIContainer extends HTMLElement {
      * and when the user is considered to be "idle".
      */
     get userIdleTimeout(): number;
-    set userIdleTimeout(value: number);
+    set userIdleTimeout(value: number | undefined);
     /**
      * The device type, either "desktop", "mobile" or "tv".
      */
     get deviceType(): DeviceType;
+    set deviceType(value: DeviceType);
     /**
      * The stream type, either "vod", "live" or "dvr".
      *
@@ -1981,10 +1796,15 @@ declare class UIContainer extends HTMLElement {
      */
     get dvrThreshold(): number;
     set dvrThreshold(value: number);
+    private accessor _hasFirstPlay;
+    private accessor _isPlayingAd;
+    private accessor _hasError;
+    private accessor _isFullWindow;
     connectedCallback(): void;
     private tryInitializePlayer_;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private readonly _onMutation;
     private readonly _onSlotChange;
     private readonly registerStateReceiver_;
@@ -1992,6 +1812,8 @@ declare class UIContainer extends HTMLElement {
     private propagateStateToReceiver_;
     private propagatePlayerToAllReceivers_;
     private removeStateFromReceiver_;
+    private get menuOpened_();
+    private set menuOpened_(value);
     private openMenu_;
     private closeMenu_;
     private readonly _onToggleMenu;
@@ -2037,6 +1859,7 @@ declare class UIContainer extends HTMLElement {
     private addPlayerListeners_;
     private removePlayerListeners_;
     private readonly _onDestroy;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -2045,7 +1868,7 @@ declare global {
 }
 
 /**
- * `<theoplayer-default-ui>` - A default UI for THEOplayer.
+ * A default UI for THEOplayer.
  *
  * This default UI provides a great player experience out-of-the-box, that works well on all types of devices
  * and for all types of streams. It provides all the common playback controls for playing, seeking,
@@ -2086,26 +1909,32 @@ declare global {
  *
  * @slot `title` - A slot for the stream's title in the top control bar.
  * @slot `top-control-bar` - A slot for extra UI controls in the top control bar.
+ * @slot `centered-chrome` - A slot to replace the controls in the center of the player,
+ *   layered on top of other controls.
  * @slot `bottom-control-bar` - A slot for extra UI controls in the bottom control bar.
  * @slot `menu` - A slot for extra menus (see {@link Menu | `<theoplayer-menu>`}).
  * @slot `error` - A slot for an error display, to show when the player encounters a fatal error.
  *   By default, this shows an {@link ErrorDisplay | `<theoplayer-error-display>`}.
- * @group Components
  */
-declare class DefaultUI extends HTMLElement {
+declare class DefaultUI extends LitElement {
+    static styles: lit.CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
     /**
      * Fired when the backing player is created, and the {@link DefaultUI.player} property is set.
      *
      * @group Events
      */
     static READY_EVENT: typeof READY_EVENT;
-    static get observedAttributes(): Attribute[];
-    protected readonly _shadowRoot: ShadowRoot;
-    protected readonly _ui: UIContainer;
-    private readonly _titleSlot;
-    private readonly _timeRange;
+    protected readonly _uiRef: Ref<UIContainer>;
+    private accessor _timeRangeInert;
     private _timeRangeInertTimeout;
     private _appliedExtensions;
+    private _configuration;
+    private _source;
+    private _userIdleTimeout;
+    private _deviceType;
+    private _dvrThreshold;
+    private accessor titleSlotNodes;
     /**
      * Creates a new THEOplayer default UI.
      *
@@ -2115,8 +1944,6 @@ declare class DefaultUI extends HTMLElement {
      *   Can also be set later on through the {@link DefaultUI.configuration} property.
      */
     constructor(configuration?: UIPlayerConfiguration);
-    protected initShadowRoot(): ShadowRoot;
-    private _upgradeProperty;
     /**
      * The underlying THEOplayer player instance.
      *
@@ -2130,35 +1957,30 @@ declare class DefaultUI extends HTMLElement {
      */
     get configuration(): UIPlayerConfiguration;
     set configuration(configuration: UIPlayerConfiguration);
-    private setConfiguration_;
     /**
      * The player's current source.
      */
     get source(): SourceDescription | undefined;
-    set source(value: SourceDescription | undefined);
+    set source(source: SourceDescription | undefined);
     /**
-     * Whether to automatically adjusts the player's height to fit the video's aspect ratio.
+     * Whether to automatically adjust the player's height to fit the video's aspect ratio.
      */
-    get fluid(): boolean;
-    set fluid(value: boolean);
+    accessor fluid: boolean;
     /**
      * Whether the player's audio is muted.
      */
-    get muted(): boolean;
-    set muted(value: boolean);
+    accessor muted: boolean;
     /**
      * Whether the player should attempt to automatically start playback.
      */
-    get autoplay(): boolean;
-    set autoplay(value: boolean);
+    accessor autoplay: boolean;
     /**
      * The stream type, either "vod", "live" or "dvr".
      *
      * If you know in advance that the source will be a livestream, you can set this property to avoid a screen flicker
      * when the player switches between its VOD-specific and live-only controls.
      */
-    get streamType(): StreamType;
-    set streamType(value: StreamType);
+    accessor streamType: StreamType;
     /**
      * Whether the user has stopped interacting with the UI and is considered to be "idle".
      */
@@ -2168,20 +1990,28 @@ declare class DefaultUI extends HTMLElement {
      * and when the user is considered to be "idle".
      */
     get userIdleTimeout(): number;
-    set userIdleTimeout(value: number);
+    set userIdleTimeout(value: number | undefined);
+    /**
+     * The device type, either "desktop", "mobile" or "tv".
+     */
+    get deviceType(): DeviceType;
+    set deviceType(value: DeviceType);
     /**
      * The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
      * and its stream type to be set to "dvr".
      */
     get dvrThreshold(): number;
     set dvrThreshold(value: number);
+    private accessor _hasTitle;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected firstUpdated(): void;
+    protected _onUiReady(): void;
     private readonly _updateStreamType;
-    private readonly _dispatchReadyEvent;
     private readonly _updateUserIdle;
     private readonly _onTitleSlotChange;
+    protected render(): HTMLTemplateResult;
+    protected renderUiContent(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -2221,13 +2051,12 @@ type Extension = (ui: DefaultUI) => void;
  */
 declare function registerExtension(extension: Extension): void;
 
-declare class BadNetworkModeMenu extends HTMLElement {
-    private readonly _radioGroup;
-    constructor();
-    protected _upgradeProperty(prop: keyof this): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+declare class BadNetworkModeMenu extends LitElement {
+    static styles: lit.CSSResult[];
+    private readonly _radioGroupRef;
+    protected firstUpdated(): void;
     private readonly _onChange;
+    protected render(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -2237,29 +2066,24 @@ declare global {
 
 /**
  * `<theolive-default-ui>` - A default UI for THEOlive.
- *
- * @group Components
  */
 declare class THEOliveDefaultUI extends DefaultUI {
-    private readonly _loading;
-    private readonly _offline;
-    private readonly _announcement;
-    private readonly _errorDisplay;
-    private readonly _playButton;
-    private readonly _root;
+    static styles: lit.CSSResult[];
+    private accessor _announcementType;
+    private accessor _announcementMessage;
+    private accessor _hidePlayButton;
+    private accessor _hideErrorDisplay;
     constructor(configuration?: UIPlayerConfiguration);
-    protected initShadowRoot(): ShadowRoot;
-    private readonly onReady;
+    protected _onUiReady(): void;
     private onLoadChannelStart;
     private onChannelOffline;
     private onChannelLoaded;
     private onError;
     private hidePlayerError;
     private stopHidingPlayerError;
-    private hidePlayerPlayButton_;
-    private stopHidingPlayerPlayButton;
     private showMessage_;
     private hideMessage_;
+    protected renderUiContent(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -2267,10 +2091,67 @@ declare global {
     }
 }
 
+declare enum Attribute {
+    CONFIGURATION = "configuration",
+    SOURCE = "source",
+    AUTOPLAY = "autoplay",
+    MUTED = "muted",
+    FULLSCREEN = "fullscreen",
+    FULLWINDOW = "fullwindow",
+    FLUID = "fluid",
+    DEVICE_TYPE = "device-type",
+    MOBILE = "mobile",
+    TV = "tv",
+    TV_FOCUS = "tv-focus",
+    MOBILE_ONLY = "mobile-only",
+    MOBILE_HIDDEN = "mobile-hidden",
+    TV_ONLY = "tv-only",
+    TV_HIDDEN = "tv-hidden",
+    USER_IDLE = "user-idle",
+    USER_IDLE_TIMEOUT = "user-idle-timeout",
+    NO_AUTO_HIDE = "no-auto-hide",
+    DISABLED = "disabled",
+    INERT = "inert",
+    HIDDEN = "hidden",
+    PAUSED = "paused",
+    ENDED = "ended",
+    VOLUME_LEVEL = "volume-level",
+    CASTING = "casting",
+    LOADING = "loading",
+    STREAM_TYPE = "stream-type",
+    LIVE = "live",
+    LIVE_ONLY = "live-only",
+    LIVE_HIDDEN = "live-hidden",
+    LIVE_THRESHOLD = "live-threshold",
+    DVR_THRESHOLD = "dvr-threshold",
+    REMAINING = "remaining",
+    REMAINING_WHEN_LIVE = "remaining-when-live",
+    SHOW_DURATION = "show-duration",
+    SEEK_OFFSET = "seek-offset",
+    MENU = "menu",
+    MENU_OPENED = "menu-opened",
+    MENU_CLOSE_ON_INPUT = "menu-close-on-input",
+    ARIA_LABEL = "aria-label",
+    ARIA_LIVE = "aria-live",
+    ARIA_CHECKED = "aria-checked",
+    HAS_AUDIO = "has-audio",
+    HAS_SUBTITLES = "has-subtitles",
+    HAS_ERROR = "has-error",
+    HAS_FIRST_PLAY = "has-first-play",
+    CAST_STATE = "cast-state",
+    TRACK_TYPE = "track-type",
+    SHOW_OFF = "show-off",
+    PLAYING_AD = "playing-ad",
+    SHOW_AD_MARKERS = "show-ad-markers",
+    CLICKTHROUGH = "clickthrough",
+    PROPERTY = "property",
+    VALUE = "value"
+}
+
 /**
  * The version of Open Video UI for Web.
  */
 declare const version: string;
 
-export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Attribute, Button, type ButtonOptions, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, ColorStops, type Constructor, ControlBar, DefaultUI, type DeviceType, DurationDisplay, ErrorDisplay, type Extension, ExtensionSlot, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, type MenuGroupOptions, type MenuOptions, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateRadioGroup, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioGroup, Range, type RangeOptions, SeekButton, SettingsMenu, SettingsMenuButton, SlotContainer, type StateReceiverElement, StateReceiverMixin, type StateReceiverPropertyMap, type StreamType, THEOliveDefaultUI, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, type TextTrackStyleMap, TextTrackStyleMenu, type TextTrackStyleOption, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, type TrackType, UIContainer, type VolumeLevel, VolumeRange, buttonTemplate, linkButtonTemplate, menuGroupTemplate, menuTemplate, rangeTemplate, registerExtension, version };
+export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Attribute, Button, type ButtonOptions, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, ColorStops, type Constructor, ControlBar, DefaultUI, type DeviceType, DurationDisplay, ErrorDisplay, type Extension, ExtensionSlot, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, type MenuGroupOptions, type MenuOptions, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateRadioGroup, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioGroup, Range, SeekButton, SettingsMenu, SettingsMenuButton, SlotContainer, type StateReceiverElement, StateReceiverMixin, type StateReceiverPropertyMap, type StreamType, THEOliveDefaultUI, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, type TextTrackStyleMap, TextTrackStyleMenu, type TextTrackStyleOption, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, type TrackType, UIContainer, type VolumeLevel, VolumeRange, buttonTemplate, linkButtonTemplate, menuGroupTemplate, menuTemplate, registerExtension, stateReceiver, version };
 export as namespace THEOplayerUI;