@theoplayer/web-ui 2.1.0 → 2.1.2

package/dist/THEOplayerUI.d.ts

@@ -1,5 +1,5 @@
 /*!
- * THEOplayer Open Video UI for Web (v2.1.0)
+ * THEOplayer Open Video UI for Web (v2.1.2)
  * License: MIT
  */
 import * as lit from 'lit';
@@ -36,7 +36,28 @@ declare function buttonTemplate(button: string, extraCss?: string): string;
 /**
  * A basic button.
  *
- * @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
+ * @cssproperty `--theoplayer-control-height` - The height of the button's control area (and default icon size). Defaults to `24px`.
+ * @cssproperty `--theoplayer-control-padding` - The padding around the button's content. Defaults to `10px`.
+ * @cssproperty `--theoplayer-control-background` - The background of the button. Defaults to `transparent`.
+ * @cssproperty `--theoplayer-control-hover-background` - The background of the button when hovered.
+ *   Defaults to `--theoplayer-control-background`.
+ * @cssproperty `--theoplayer-text-color` - The text color of the button. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-text-font-size` - The font size of the button's text. Defaults to `14px`.
+ * @cssproperty `--theoplayer-text-content-height` - The line-height of the button's text. Defaults to `--theoplayer-control-height`.
+ * @cssproperty `--theoplayer-icon-color` - The color of the button's icon. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-focus-ring-color` - The color of the focus ring around focused buttons. Defaults to `rgba(27, 127, 204, 0.9)`.
+ * @cssproperty `--theoplayer-button-text-color` - The text color of the button. Defaults to `--theoplayer-text-color`.
+ * @cssproperty `--theoplayer-button-icon-width` - The width of the button's icon. Defaults to `--theoplayer-control-height`.
+ * @cssproperty `--theoplayer-button-icon-height` - The height of the button's icon. Defaults to `--theoplayer-control-height`.
+ * @cssproperty `--theoplayer-button-icon-transition` - The CSS transition applied to the button's icon. Defaults to `none`.
+ * @cssproperty `--theoplayer-button-icon-shadow` - A drop-shadow applied to the icon. Defaults to `none`.
+ * @cssproperty `--theoplayer-button-hover-icon-shadow` - A drop-shadow applied to the icon on hover. Defaults to `0 0 4px rgba(255, 255, 255, 0.5)`.
+ * @cssproperty `--theoplayer-button-checked-background` - The background of a toggled-on button (e.g. mute, fullscreen). Defaults to `#fff`.
+ * @cssproperty `--theoplayer-button-checked-color` - The color of a toggled-on button. Defaults to `#000`.
+ * @cssproperty `--theoplayer-button-disabled-text-color` - The text color of a disabled button. Defaults to `#ccc`.
+ * @cssproperty `--theoplayer-before-first-play-display` - The CSS `display` of the button before first play.
+ *   The {@link UIContainer | `<theoplayer-ui>`} will set this to `none` to hide all buttons until playback begins,
+ *   after which this becomes `unset` and the button reverts back to its initial CSS `display`.
  */
 declare class Button extends LitElement {
     static styles: lit.CSSResult[];
@@ -83,8 +104,6 @@ declare global {
 declare function linkButtonTemplate(button: string, extraCss?: string): string;
 /**
  * A {@link Button | button} that opens a hyperlink.
- *
- * @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
  */
 declare class LinkButton extends LitElement {
     static styles: lit.CSSResult[];
@@ -119,14 +138,24 @@ declare global {
 /**
  * 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`.
+ * @cssproperty `--theoplayer-play-button-icon-color` - The icon color of the play button.
+ *   Overrides `--theoplayer-icon-color` for this button. Defaults to `unset`.
  */
 declare class PlayButton extends Button {
     static styles: lit.CSSResult[];
     private _player;
     connectedCallback(): void;
+    /**
+     * Whether the player is paused.
+     *
+     * This reflects `player.paused`.
+     */
     accessor paused: boolean;
+    /**
+     * Whether the player is ended.
+     *
+     * This reflects `player.ended`.
+     */
     accessor ended: boolean;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
@@ -149,9 +178,6 @@ declare global {
 type VolumeLevel = 'off' | 'low' | 'high';
 /**
  * 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%).
  */
 declare class MuteButton extends Button {
     static styles: lit.CSSResult[];
@@ -159,6 +185,8 @@ declare class MuteButton extends Button {
     connectedCallback(): void;
     /**
      * The volume level of the player.
+     *
+     * Can be "off" (muted), "low" (volume < 50%) or "high" (volume >= 50%).
      */
     accessor volumeLevel: VolumeLevel;
     get player(): ChromelessPlayer | undefined;
@@ -178,7 +206,7 @@ declare global {
 /**
  * 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).
+ * @cssproperty `--theoplayer-seek-button-font-size` - The font size of the offset number rendered inside the seek icon. Defaults to `calc(0.3 * --theoplayer-button-icon-height)`.
  */
 declare class SeekButton extends Button {
     static styles: lit.CSSResult[];
@@ -205,11 +233,6 @@ type StreamType = 'vod' | 'live' | 'dvr';
 
 /**
  * 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.
  */
 declare class TimeDisplay extends LitElement {
     static styles: lit.CSSResult[];
@@ -217,9 +240,21 @@ declare class TimeDisplay extends LitElement {
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
+    /**
+     * If set, shows the remaining time of the stream. Not compatible with {@link showDuration}.
+     */
     accessor remaining: boolean;
+    /**
+     * If set, and the stream is a livestream, shows the remaining time (until the live point) of the stream.
+     */
     accessor remainingWhenLive: boolean;
+    /**
+     * If set, also shows the duration of the stream.
+     */
     accessor showDuration: boolean;
+    /**
+     * The stream type, either "vod", "live" or "dvr".
+     */
     accessor streamType: StreamType;
     private accessor _currentTime;
     private accessor _duration;
@@ -303,6 +338,9 @@ declare class RadioGroup extends LitElement {
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * The device type, either "desktop", "mobile" or "tv".
+     */
     accessor deviceType: DeviceType;
     /**
      * The selected value.
@@ -349,11 +387,13 @@ declare function menuTemplate(heading: string, content: string, extraCss?: strin
  *
  * The menu has a heading at the top, with a {@link CloseMenuButton | close button} and a heading text.
  *
- * @attribute `menu-close-on-input` - Whether to automatically close the menu whenever one of its controls
- *   receives an input (e.g. when a radio button is clicked).
- * @attribute `menu-opened` (readonly) - Whether the menu is currently open.
- *
  * @slot `heading` - A slot for the menu's heading.
+ *
+ * @cssproperty `--theoplayer-menu-color` - The text color of menu items. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-menu-control-hover-background` - The background of a menu item when hovered. Defaults to `rgba(255, 255, 255, 0.3)`.
+ * @cssproperty `--theoplayer-menu-margin` - The margin around the menu. Defaults to `10px`.
+ * @cssproperty `--theoplayer-menu-min-width` - The minimum width of the menu. Defaults to `80%`.
+ * @cssproperty `--theoplayer-menu-max-width` - The maximum width of the menu. Defaults to `100%`.
  */
 declare class Menu extends LitElement {
     static styles: lit.CSSResult[];
@@ -373,6 +413,9 @@ declare class Menu extends LitElement {
      * receives an input (e.g. when a radio button is clicked).
      */
     accessor closeOnInput: boolean;
+    /**
+     * Whether the menu is currently open.
+     */
     private get menuOpened_();
     private set menuOpened_(value);
     /**
@@ -411,8 +454,6 @@ declare function menuGroupTemplate(content: string, extraCss?: string): string;
  * 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.
  */
 declare class MenuGroup extends LitElement {
     static styles: lit.CSSResult[];
@@ -420,6 +461,9 @@ declare class MenuGroup extends LitElement {
     private readonly _template;
     constructor(options?: MenuGroupOptions);
     private _menuOpened;
+    /**
+     * Whether any menu in the group is currently open.
+     */
     private get menuOpened_();
     private set menuOpened_(value);
     private accessor _menuSlot;
@@ -495,8 +539,6 @@ declare global {
 
 /**
  * A menu button that opens a {@link Menu}.
- *
- * @attribute `menu` - The ID of the menu to open.
  */
 declare class MenuButton extends Button {
     private _menuId;
@@ -559,10 +601,6 @@ type TrackType = 'audio' | 'video' | 'subtitles';
 /**
  * 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.
  */
 declare class TrackRadioGroup extends LitElement {
     static styles: lit.CSSResult[];
@@ -571,6 +609,8 @@ declare class TrackRadioGroup extends LitElement {
     private accessor _tracksList;
     /**
      * The track type of the available tracks.
+     *
+     * Can be "audio", "video" or "subtitles".
      */
     get trackType(): TrackType;
     set trackType(trackType: TrackType);
@@ -653,7 +693,6 @@ type TextTrackStyleOption = keyof TextTrackStyleMap;
  * 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>`
  */
@@ -667,6 +706,8 @@ declare class TextTrackStyleRadioGroup extends LitElement {
     protected firstUpdated(): void;
     /**
      * The property name of the text track style option.
+     *
+     * One of {@link TextTrackStyleOption}.
      */
     get property(): TextTrackStyleOption;
     set property(property: TextTrackStyleOption);
@@ -691,8 +732,6 @@ declare global {
 /**
  * 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}.
  */
 declare class TextTrackStyleDisplay extends LitElement {
     private _player;
@@ -700,6 +739,8 @@ declare class TextTrackStyleDisplay extends LitElement {
     private _textTrackStyle;
     /**
      * The property name of the text track style option.
+     *
+     * One of {@link TextTrackStyleOption}.
      */
     get property(): TextTrackStyleOption;
     set property(property: TextTrackStyleOption);
@@ -758,8 +799,6 @@ declare global {
  * 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.
  */
 declare class LanguageMenuButton extends MenuButton {
     private _player;
@@ -858,7 +897,13 @@ declare global {
  * A control that displays the name of the active video quality.
  */
 declare class ActiveQualityDisplay extends LitElement {
+    /**
+     * The currently active video quality.
+     */
     accessor activeVideoQuality: VideoQuality | undefined;
+    /**
+     * The list of target video qualities.
+     */
     accessor targetVideoQualities: VideoQuality[] | undefined;
     protected render(): HTMLTemplateResult;
 }
@@ -974,6 +1019,9 @@ declare global {
 declare class FullscreenButton extends Button {
     static styles: lit.CSSResult[];
     connectedCallback(): void;
+    /**
+     * Whether the player is in fullscreen mode.
+     */
     accessor fullscreen: boolean;
     protected handleClick(): void;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
@@ -996,10 +1044,32 @@ declare class ColorStops {
 /**
  * A slider to select a value from a range.
  *
- * @attribute `disabled` - Whether the range is disabled.
- *   When disabled, the slider value cannot be changed, and the slider thumb is hidden.
- * @attribute `inert` - Whether the range is inert.
- *   When inert, the slider value cannot be changed, but the slider thumb is still visible.
+ * @cssproperty `--theoplayer-range-bar-color` - The color of the filled portion of the range track. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-range-track-height` - The height of the range track. Defaults to `4px`.
+ * @cssproperty `--theoplayer-range-track-width` - The width of the range track. Defaults to `100%`.
+ * @cssproperty `--theoplayer-range-track-background` - The background of the unfilled portion of the track. Defaults to `rgba(255, 255, 255, 0.2)`.
+ * @cssproperty `--theoplayer-range-track-border` - The border of the track. Defaults to `none`.
+ * @cssproperty `--theoplayer-range-track-border-radius` - The border radius of the track. Defaults to `0`.
+ * @cssproperty `--theoplayer-range-track-box-shadow` - The box-shadow of the track. Defaults to `none`.
+ * @cssproperty `--theoplayer-range-track-transition` - The CSS transition applied to the track. Defaults to `none`.
+ * @cssproperty `--theoplayer-range-track-translate-x` - Horizontal translation of the track. Defaults to `0`.
+ * @cssproperty `--theoplayer-range-track-translate-y` - Vertical translation of the track. Defaults to `0`.
+ * @cssproperty `--theoplayer-range-track-outline` - The outline of the track.
+ * @cssproperty `--theoplayer-range-track-outline-offset` - The outline offset of the track.
+ * @cssproperty `--theoplayer-range-track-pointer-background` - The background of the hover/preview pointer indicator on the track. Defaults to `transparent`.
+ * @cssproperty `--theoplayer-range-track-pointer-border-right` - The right border of the pointer indicator. Defaults to `none`.
+ * @cssproperty `--theoplayer-range-thumb-width` - The width of the slider thumb. Defaults to `10px`.
+ * @cssproperty `--theoplayer-range-thumb-height` - The height of the slider thumb. Defaults to `10px`.
+ * @cssproperty `--theoplayer-range-thumb-background` - The background of the slider thumb. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-range-thumb-border` - The border of the slider thumb. Defaults to `none`.
+ * @cssproperty `--theoplayer-range-thumb-border-radius` - The border radius of the slider thumb. Defaults to `10px`.
+ * @cssproperty `--theoplayer-range-thumb-box-shadow` - The box-shadow of the slider thumb. Defaults to `1px 1px 1px transparent`.
+ * @cssproperty `--theoplayer-range-thumb-transition` - The CSS transition applied to the slider thumb. Defaults to `none`.
+ * @cssproperty `--theoplayer-range-thumb-transform` - The CSS transform applied to the slider thumb. Defaults to `none`.
+ * @cssproperty `--theoplayer-range-thumb-opacity` - The opacity of the slider thumb. Defaults to `1`.
+ * @cssproperty `--theoplayer-range-padding` - The padding around the range. Defaults to `--theoplayer-control-padding`.
+ * @cssproperty `--theoplayer-range-padding-left` - The left padding around the range. Defaults to `--theoplayer-range-padding`.
+ * @cssproperty `--theoplayer-range-padding-right` - The right padding around the range. Defaults to `--theoplayer-range-padding`.
  *
  * @group Components
  */
@@ -1041,6 +1111,15 @@ declare abstract class Range extends LitElement {
      */
     get value(): number;
     set value(value: number);
+    /**
+     * The current value.
+     *
+     * Setting this property does *not* trigger {@link handleInput}.
+     * This should be used when synchronizing the range with external state,
+     * e.g. when updating the value of a time range with the player's current time.
+     */
+    protected get rawValue(): number;
+    protected set rawValue(value: number);
     /**
      * The minimum allowed value.
      */
@@ -1057,6 +1136,9 @@ declare abstract class Range extends LitElement {
      * If set to `"any"`, the value can change with arbitrary precision.
      */
     accessor step: number | 'any';
+    /**
+     * The device type, either "desktop", "mobile" or "tv".
+     */
     accessor deviceType: DeviceType;
     accessor ariaLive: string | null;
     private readonly _onInput;
@@ -1102,6 +1184,9 @@ declare abstract class Range extends LitElement {
  * (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.
+ *
+ * @cssproperty `--theoplayer-preview-thumbnail-background` - The background of the preview thumbnail container. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-preview-thumbnail-padding` - The padding around the preview thumbnail. Defaults to `2px`.
  */
 declare class PreviewThumbnail extends LitElement {
     static styles: lit.CSSResult[];
@@ -1134,18 +1219,23 @@ declare global {
 
 /**
  * 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.
  */
 declare class PreviewTimeDisplay extends LitElement {
     static styles: lit.CSSResult[];
     private _player;
     connectedCallback(): void;
     accessor previewTime: number;
+    /**
+     * If set, shows the remaining time of the stream.
+     */
     accessor remaining: boolean;
+    /**
+     * If set, and the stream is a livestream, shows the remaining time (until the live point) of the stream.
+     */
     accessor remainingWhenLive: boolean;
+    /**
+     * The stream type, either "vod", "live" or "dvr".
+     */
     accessor streamType: StreamType;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
@@ -1166,6 +1256,9 @@ declare global {
  * @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}.
+ *
+ * @cssproperty `--theoplayer-preview-text-shadow` - The text shadow applied to the preview box shown while hovering the seek bar.
+ *   Defaults to `0 0 4px rgba(0, 0, 0, 0.75)`.
  */
 declare class TimeRange extends Range {
     static styles: lit.CSSResult[];
@@ -1185,8 +1278,14 @@ declare class TimeRange extends Range {
     disconnectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
+    /**
+     * The stream type, either "vod", "live" or "dvr".
+     */
     get streamType(): StreamType;
     set streamType(streamType: StreamType);
+    /**
+     * Whether to show markers for advertisements on the seek bar.
+     */
     get showAdMarkers(): boolean;
     set showAdMarkers(showAdMarkers: boolean);
     private readonly _updateFromPlayer;
@@ -1236,6 +1335,17 @@ declare global {
 
 /**
  * A screen that shows the details of a fatal player error.
+ *
+ * @cssproperty `--theoplayer-error-icon-color` - The color of the error icon. Defaults to `--theoplayer-icon-color`.
+ * @cssproperty `--theoplayer-error-icon-width` - The width of the error icon. Defaults to `48px`.
+ * @cssproperty `--theoplayer-error-icon-height` - The height of the error icon. Defaults to `48px`.
+ * @cssproperty `--theoplayer-error-icon-gap` - The gap between the error icon and the text. Defaults to `10px`.
+ * @cssproperty `--theoplayer-error-heading-color` - The text color of the error heading. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-error-heading-margin` - The margin around the error heading. Defaults to `0 0 10px`.
+ * @cssproperty `--theoplayer-error-message-color` - The text color of the error message. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-error-message-margin` - The margin around the error message. Defaults to `0`.
+ * @cssproperty `--theoplayer-error-min-width` - The minimum width of the error display. Defaults to `0`.
+ * @cssproperty `--theoplayer-error-max-width` - The maximum width of the error display. Defaults to `80%`.
  */
 declare class ErrorDisplay extends LitElement {
     static styles: lit.CSSResult[];
@@ -1244,6 +1354,9 @@ declare class ErrorDisplay extends LitElement {
      * The error.
      */
     accessor error: THEOplayerError | undefined;
+    /**
+     * Whether the player is in fullscreen mode.
+     */
     accessor fullscreen: boolean;
     protected render(): lit_html.TemplateResult<1>;
 }
@@ -1301,6 +1414,17 @@ declare global {
 
 /**
  * A control that displays the casting status while using Chromecast.
+ *
+ * @cssproperty `--theoplayer-chromecast-display-icon-color` - The color of the Chromecast icon. Defaults to `--theoplayer-icon-color`.
+ * @cssproperty `--theoplayer-chromecast-display-icon-width` - The width of the Chromecast icon. Defaults to `48px`.
+ * @cssproperty `--theoplayer-chromecast-display-icon-height` - The height of the Chromecast icon. Defaults to `48px`.
+ * @cssproperty `--theoplayer-chromecast-display-icon-gap` - The gap between the icon and the heading. Defaults to `10px`.
+ * @cssproperty `--theoplayer-chromecast-display-heading-color` - The color of the heading text. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-chromecast-display-heading-font-size` - The font size of the heading text. Defaults to `--theoplayer-text-font-size`.
+ * @cssproperty `--theoplayer-chromecast-display-heading-margin` - The margin around the heading text. Defaults to `0`.
+ * @cssproperty `--theoplayer-chromecast-display-receiver-color` - The color of the receiver name text. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-chromecast-display-receiver-font-size` - The font size of the receiver name text. Defaults to `calc(1.25 * var(--theoplayer-text-font-size, 14px))`.
+ * @cssproperty `--theoplayer-chromecast-display-receiver-margin` - The margin around the receiver name text. Defaults to `0`.
  */
 declare class ChromecastDisplay extends LitElement {
     static styles: lit.CSSResult[];
@@ -1341,13 +1465,19 @@ declare global {
 /**
  * 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.
+ * @cssproperty `--theoplayer-loading-delay` - The delay before the loading spinner is shown. Defaults to `0.5s`.
+ * @cssproperty `--theoplayer-loading-icon-color` - The color of the loading spinner. Defaults to `--theoplayer-icon-color`.
+ * @cssproperty `--theoplayer-loading-icon-width` - The width of the loading spinner. Defaults to `48px`.
+ * @cssproperty `--theoplayer-loading-icon-height` - The height of the loading spinner. Defaults to `--theoplayer-loading-icon-width`.
  */
 declare class LoadingIndicator extends LitElement {
     static styles: lit.CSSResult[];
     private _player;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
+    /**
+     * Whether the player is waiting for more data. If set, the indicator is shown.
+     */
     accessor loading: boolean;
     private readonly _updateFromPlayer;
     protected render(): HTMLTemplateResult;
@@ -1372,6 +1502,9 @@ declare class GestureReceiver extends LitElement {
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
+    /**
+     * The device type, either "desktop", "mobile" or "tv".
+     */
     accessor deviceType: DeviceType;
     private readonly _onPointerDown;
     private readonly _onClick;
@@ -1389,19 +1522,33 @@ declare global {
  * 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.
+ * @cssproperty `--theoplayer-live-button-color` - The color of the live indicator when not at the live point. Defaults to `rgb(140, 140, 140)`.
+ * @cssproperty `--theoplayer-live-button-active-color` - The color of the live indicator when playing at the live point. Defaults to `red`.
  */
 declare class LiveButton extends Button {
     static styles: lit.CSSResult[];
     private _player;
     private _liveThreshold;
     connectedCallback(): void;
+    /**
+     * Whether the player is paused.
+     */
     accessor paused: boolean;
+    /**
+     * The stream type, either "vod", "live" or "dvr".
+     */
     accessor streamType: StreamType;
+    /**
+     * 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.
+     */
     get liveThreshold(): number;
     set liveThreshold(value: number);
+    /**
+     * Whether the player is considered to be playing at the live point.
+     */
     accessor live: boolean;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
@@ -1442,6 +1589,11 @@ declare global {
 /**
  * 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).
+ *
+ * @cssproperty `--theoplayer-ad-display-background` - The background of the ad display. Defaults to `#ffc50f`.
+ * @cssproperty `--theoplayer-ad-display-border-radius` - The border radius of the ad display. Defaults to `2px`.
+ * @cssproperty `--theoplayer-ad-display-padding` - The padding of the ad display. Defaults to `--theoplayer-control-padding`.
+ * @cssproperty `--theoplayer-ad-display-text-color` - The text color of the ad display. Defaults to `#000`.
  */
 declare class AdDisplay extends LitElement {
     static styles: lit.CSSResult[];
@@ -1489,6 +1641,9 @@ declare class AdClickThroughButton extends LinkButton {
     private _clickThrough;
     constructor();
     connectedCallback(): void;
+    /**
+     * The click-through URL of the advertisement.
+     */
     get clickThrough(): string | null;
     set clickThrough(clickThrough: string | null);
     get player(): ChromelessPlayer | undefined;
@@ -1506,6 +1661,20 @@ declare global {
 /**
  * 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.
+ *
+ * @cssproperty `--theoplayer-ad-skip-background` - The background of the skip button. Defaults to `rgba(0, 0, 0, 0.7)`.
+ * @cssproperty `--theoplayer-ad-skip-color` - The text color of the skip button. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-ad-skip-border` - The border of the skip button. Defaults to `1px solid rgba(255, 255, 255, 0.5)`.
+ * @cssproperty `--theoplayer-ad-skip-hover-background` - The background of the skip button when hovered. Defaults to `rgba(0, 0, 0, 0.9)`.
+ * @cssproperty `--theoplayer-ad-skip-hover-color` - The text color of the skip button when hovered. Defaults to `--theoplayer-ad-skip-color`.
+ * @cssproperty `--theoplayer-ad-skip-hover-border` - The border of the skip button when hovered. Defaults to `1px solid #fff`.
+ * @cssproperty `--theoplayer-ad-skip-countdown-background` - The background of the countdown shown before the ad is skippable. Defaults to `transparent`.
+ * @cssproperty `--theoplayer-ad-skip-countdown-color` - The text color of the countdown. Defaults to `--theoplayer-ad-skip-color`.
+ * @cssproperty `--theoplayer-ad-skip-countdown-border` - The border of the countdown. Defaults to `1px solid transparent`.
+ * @cssproperty `--theoplayer-ad-skip-font-size` - The font size of the skip button text. Defaults to `--theoplayer-text-font-size`.
+ * @cssproperty `--theoplayer-ad-skip-line-height` - The line height of the skip button text. Defaults to `--theoplayer-text-content-height`.
+ * @cssproperty `--theoplayer-ad-skip-icon-width` - The width of the skip button icon. Defaults to `--theoplayer-control-height`.
+ * @cssproperty `--theoplayer-ad-skip-icon-height` - The height of the skip button icon. Defaults to `--theoplayer-control-height`.
  */
 declare class AdSkipButton extends Button {
     static styles: lit.CSSResult[];
@@ -1616,35 +1785,6 @@ declare const READY_EVENT: "theoplayerready";
  *
  * The styling can be controlled using CSS custom properties (see below).
  *
- * @attribute `configuration` - The THEOplayer {@link theoplayer!UIPlayerConfiguration | UIPlayerConfiguration}, as a JSON string.
- * @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
- * @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
- * @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
- * @attribute `autoplay` - If set, the player attempts to automatically start playing (if allowed).
- * @attribute `device-type` - The device type, either "desktop", "mobile" or "tv".
- *   Can be used in CSS to show/hide certain device-specific UI controls.
- * @attribute `mobile` - Whether the user is on a mobile device. Equivalent to `device-type == "mobile"`.
- * @attribute `tv` - Whether the user is on a TV device. Equivalent to `device-type == "tv"`.
- * @attribute `stream-type` - The stream type, either "vod", "live" or "dvr".
- *   Can be used to show/hide certain UI controls specific for livestreams, such as
- *   a {@link LiveButton | `<theoplayer-live-button>`}.
- *   If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker
- *   when the player switches between its VOD-specific and live-only controls.
- * @attribute `user-idle` (readonly) - Whether the user is considered to be "idle".
- *   When the user is idle and the video is playing, all slotted UI elements will be hidden
- *   (unless they have the `no-auto-hide` attribute).
- * @attribute `user-idle-timeout` - The timeout (in seconds) between when the user stops interacting with the UI,
- *   and when the user is considered to be "idle".
- * @attribute `dvr-threshold` - 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".
- * @attribute `paused` (readonly) - Whether the player is paused. Reflects `ui.player.paused`.
- * @attribute `ended` (readonly) - Whether the player is ended. Reflects `ui.player.ended`.
- * @attribute `casting` (readonly) - Whether the player is casting. Reflects `ui.player.cast.casting`.
- * @attribute `playing-ad` (readonly) - Whether the player is playing a linear ad. Reflects `ui.player.ads.playing`.
- * @attribute `has-error` (readonly) - Whether the player has encountered a fatal error.
- * @attribute `has-first-play` (readonly) - Whether the player has (previously) started playback for this stream.
- *   Can be used in CSS to show/hide certain initial controls, such as a poster image or a centered play button.
- *
  * @slot `(no` name, default slot) - A slot for controls at the bottom of the player.
  *   Can be used for controls such as a play button ({@link PlayButton | `<theoplayer-play-button>`}) or a seek bar
  *   ({@link TimeRange | `<theoplayer-time-range>`}).
@@ -1657,6 +1797,25 @@ declare const READY_EVENT: "theoplayerready";
  * @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>`}).
+ *
+ * @cssproperty `--theoplayer-min-width` - The minimum width of the player. Defaults to `300px`.
+ * @cssproperty `--theoplayer-height` - The height of the player. Defaults to `unset`.
+ *   Ignored when `--theoplayer-aspect-ratio` is set.
+ * @cssproperty `--theoplayer-aspect-ratio` - The aspect ratio of the player. Defaults to `16 / 9`.
+ *   When {@link fluid} is set, this is automatically set to the video's natural aspect ratio.
+ *   Set this to `none` (or any invalid `<length>`) to disable, for example when you want to use `--theoplayer-height` instead.
+ * @cssproperty `--theoplayer-background` - The background color of the player. Defaults to `#000`.
+ * @cssproperty `--theoplayer-text-color` - The text color of a control. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-text-font-size` - The font size of any text inside a control. Defaults to `14px`.
+ * @cssproperty `--theoplayer-control-height` - The height of a control. Defaults to `24px`.
+ * @cssproperty `--theoplayer-control-padding` - The padding around a control. Defaults to `10px`.
+ * @cssproperty `--theoplayer-video-border-radius` - The border radius of the `<video>` element. Defaults to `0`.
+ * @cssproperty `--theoplayer-video-object-fit` - The `object-fit` of the `<video>` element. Defaults to `contain`.
+ * @cssproperty `--theoplayer-control-backdrop-background` - The background shown behind all controls. Defaults to `transparent`.
+ * @cssproperty `--theoplayer-menu-backdrop-background` - The background of the menu layer. Defaults to `rgba(0, 0, 0, 0.5)`.
+ * @cssproperty `--theoplayer-menu-layer-padding` - Padding of the menu layer. Defaults to `10px`.
+ * @cssproperty `--theoplayer-menu-min-width` - Minimum width of the menu (desktop). Defaults to `200px`.
+ * @cssproperty `--theoplayer-error-background` - The background of the error layer shown when the player has a fatal error. Defaults to `rgba(0, 0, 0, 0.5)`.
  */
 declare class UIContainer extends LitElement {
     static styles: lit.CSSResult[];
@@ -1751,16 +1910,22 @@ declare class UIContainer extends LitElement {
     private set fullscreen(value);
     /**
      * Whether the player is paused.
+     *
+     * This reflects `player.paused`
      */
     get paused(): boolean;
     private set paused(value);
     /**
      * Whether the player is ended.
+     *
+     * This reflects `player.ended`
      */
     get ended(): boolean;
     private set ended(value);
     /**
      * Whether the player is casting to a remote receiver.
+     *
+     * This reflects `player.cast.casting`
      */
     get casting(): boolean;
     private set casting(value);
@@ -1780,6 +1945,18 @@ declare class UIContainer extends LitElement {
      */
     get deviceType(): DeviceType;
     set deviceType(value: DeviceType);
+    /**
+     * Whether the user is on a mobile device.
+     *
+     * Equivalent to `deviceType == "mobile"`.
+     */
+    private accessor mobile;
+    /**
+     * Whether the user is on a TV device.
+     *
+     * Equivalent to `deviceType == "tv"`.
+     */
+    private accessor tv;
     /**
      * The stream type, either "vod", "live" or "dvr".
      *
@@ -1797,9 +1974,26 @@ declare class UIContainer extends LitElement {
      */
     get dvrThreshold(): number;
     set dvrThreshold(value: number);
+    /**
+     * Whether the player has (previously) started playback for this stream.
+     *
+     * Can be used in CSS to show/hide certain initial controls, such as a poster image or a centered play button.
+     */
     private accessor _hasFirstPlay;
+    /**
+     * Whether the player is playing a linear ad.
+     *
+     * This reflects `player.ads.playing`.
+     */
     private accessor _isPlayingAd;
+    /**
+     * Whether the player has encountered a fatal error.
+     */
     private accessor _hasError;
+    /**
+     * Whether the player is in "full window" mode,
+     * as a fallback when the player cannot use the "native" fullscreen mode.
+     */
     private accessor _isFullWindow;
     connectedCallback(): void;
     private tryInitializePlayer_;
@@ -1813,6 +2007,9 @@ declare class UIContainer extends LitElement {
     private propagateStateToReceiver_;
     private propagatePlayerToAllReceivers_;
     private removeStateFromReceiver_;
+    /**
+     * Whether any {@link Menu | menu} is currently open.
+     */
     private get menuOpened_();
     private set menuOpened_(value);
     private openMenu_;
@@ -1889,25 +2086,6 @@ declare global {
  * For more extensive customizations, we recommend defining your own custom UI using
  * a {@link UIContainer | `<theoplayer-ui>`}.
  *
- * @attribute `configuration` - The THEOplayer {@link theoplayer!UIPlayerConfiguration | UIPlayerConfiguration}, as a JSON string.
- * @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
- * @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
- * @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
- * @attribute `autoplay` - If set, the player attempts to automatically start playing (if allowed).
- * @attribute `device-type` - The device type, either "desktop", "mobile" or "tv".
- *   Can be used in CSS to show/hide certain device-specific UI controls.
- * @attribute `mobile` - Whether the user is on a mobile device. Equivalent to `device-type == "mobile"`.
- * @attribute `tv` - Whether the user is on a TV device. Equivalent to `device-type == "tv"`.
- * @attribute `stream-type` - The stream type, either "vod", "live" or "dvr".
- *   Can be used to show/hide certain UI controls specific for livestreams, such as
- *   a {@link LiveButton | `<theoplayer-live-button>`}.
- *   If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker
- *   when the player switches between its VOD-specific and live-only controls.
- * @attribute `user-idle-timeout` - The timeout (in seconds) between when the user stops interacting with the UI,
- *   and when the user is considered to be "idle".
- * @attribute `dvr-threshold` - 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".
- *
  * @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,
@@ -1916,6 +2094,32 @@ declare global {
  * @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>`}.
+ *
+ * @cssproperty `--theoplayer-text-color` - The text color of a control. Defaults to `#fff`.
+ * @cssproperty `--theoplayer-text-font-size` - The font size of any text inside a control. Defaults to `14px`.
+ * @cssproperty `--theoplayer-control-height` - The height of a control. Defaults to `24px`.
+ * @cssproperty `--theoplayer-control-padding` - The padding around a control. Defaults to `10px`.
+ * @cssproperty `--theoplayer-control-background-gradient-stops` - The gradient stops used for the subtle
+ *   backdrop gradient behind the top and bottom control bars on desktop. Defaults to a smooth
+ *   transparent-to-black gradient.
+ * @cssproperty `--theoplayer-mobile-control-backdrop-background` - The background applied to the entire player
+ *   on mobile when the controls are shown. Defaults to `rgba(0, 0, 0, 0.5)`.
+ * @cssproperty `--theoplayer-centered-chrome-button-icon-width` - The icon width of buttons in the centered
+ *   chrome slot. Defaults to `48px`.
+ * @cssproperty `--theoplayer-centered-chrome-control-height` - The control height of elements in the centered
+ *   chrome slot. Defaults to `48px`.
+ * @cssproperty `--theoplayer-center-play-button-icon-color` - The icon color of the centered play button.
+ *   Overrides `--theoplayer-play-button-icon-color` for this button. Defaults to `unset`.
+ * @cssproperty `--theoplayer-time-range-control-height` - The control height of the time range (seek bar).
+ *   Defaults to `12px`.
+ * @cssproperty `--theoplayer-time-range-track-pointer-background` - The background of the hover/preview pointer
+ *   on the time range. Defaults to `rgba(255, 255, 255, 0.5)`.
+ * @cssproperty `--theoplayer-volume-range-track-width` - The width of the volume range track when expanded on hover.
+ *   Defaults to `70px`.
+ * @cssproperty `--theoplayer-ad-chrome-control-height` - The control height for elements inside the ad chrome.
+ *   Defaults to `12px`.
+ * @cssproperty `--theoplayer-ad-control-height` - The control height of playback controls while an ad is playing.
+ *   Defaults to `16px`.
  */
 declare class DefaultUI extends LitElement {
     static styles: lit.CSSResult[];
@@ -1952,14 +2156,17 @@ declare class DefaultUI extends LitElement {
      */
     get player(): ChromelessPlayer | undefined;
     /**
-     * The player configuration.
+     * The player's {@link theoplayer!UIPlayerConfiguration | configuration}.
      *
      * Used to create the underlying THEOplayer instance.
+     * When set as an attribute, this must be a JSON string.
      */
     get configuration(): UIPlayerConfiguration;
     set configuration(configuration: UIPlayerConfiguration);
     /**
-     * The player's current source.
+     * The player's {@link theoplayer!SourceDescription | current source}.
+     *
+     * When set as an attribute, this must be a JSON string.
      */
     get source(): SourceDescription | undefined;
     set source(source: SourceDescription | undefined);
@@ -1969,6 +2176,8 @@ declare class DefaultUI extends LitElement {
     accessor fluid: boolean;
     /**
      * Whether the player's audio is muted.
+     *
+     * This reflects `player.muted`.
      */
     accessor muted: boolean;
     /**
@@ -1980,6 +2189,9 @@ declare class DefaultUI extends LitElement {
      *
      * 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.
+     *
+     * Can be used to show/hide certain UI controls specific for livestreams, such as
+     * a {@link LiveButton | `<theoplayer-live-button>`}.
      */
     accessor streamType: StreamType;
     /**
@@ -1994,9 +2206,23 @@ declare class DefaultUI extends LitElement {
     set userIdleTimeout(value: number | undefined);
     /**
      * The device type, either "desktop", "mobile" or "tv".
+     *
+     * This attribute can be used in CSS to show/hide certain device-specific UI controls.
      */
     get deviceType(): DeviceType;
     set deviceType(value: DeviceType);
+    /**
+     * Whether the user is on a mobile device.
+     *
+     * Equivalent to `deviceType == "mobile"`.
+     */
+    private accessor mobile;
+    /**
+     * Whether the user is on a TV device.
+     *
+     * Equivalent to `deviceType == "tv"`.
+     */
+    private accessor tv;
     /**
      * 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".