@mattebox/player 0.1.0 → 0.2.0

package/dist/es2015/entries/fullscreen-button.js

@@ -0,0 +1,7 @@
+import { FULLSCREEN_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxFullscreenButton } from "../elements/fullscreen-button.js";
+//#region src/entries/fullscreen-button.ts
+if (customElements.get("mbx-fullscreen-button") === void 0) customElements.define(FULLSCREEN_BUTTON, MbxFullscreenButton);
+//#endregion
+export { MbxFullscreenButton };

package/dist/es2015/entries/live-button.js

@@ -0,0 +1,7 @@
+import { LIVE_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxLiveButton } from "../elements/live-button.js";
+//#region src/entries/live-button.ts
+if (customElements.get("mbx-live-button") === void 0) customElements.define(LIVE_BUTTON, MbxLiveButton);
+//#endregion
+export { MbxLiveButton };

package/dist/es2015/entries/mute-button.js

@@ -0,0 +1,7 @@
+import { MUTE_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxMuteButton } from "../elements/mute-button.js";
+//#region src/entries/mute-button.ts
+if (customElements.get("mbx-mute-button") === void 0) customElements.define(MUTE_BUTTON, MbxMuteButton);
+//#endregion
+export { MbxMuteButton };

package/dist/es2015/entries/panels.js

@@ -0,0 +1,7 @@
+import { PANELS } from "../tags.js";
+import "../element-entry.js";
+import { MbxPanels } from "../elements/panels.js";
+//#region src/entries/panels.ts
+if (customElements.get("mbx-panels") === void 0) customElements.define(PANELS, MbxPanels);
+//#endregion
+export { MbxPanels };

package/dist/es2015/entries/pip-button.js

@@ -0,0 +1,7 @@
+import { PIP_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxPipButton } from "../elements/pip-button.js";
+//#region src/entries/pip-button.ts
+if (customElements.get("mbx-pip-button") === void 0) customElements.define(PIP_BUTTON, MbxPipButton);
+//#endregion
+export { MbxPipButton };

package/dist/es2015/entries/play-button.js

@@ -0,0 +1,7 @@
+import { PLAY_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxPlayButton } from "../elements/play-button.js";
+//#region src/entries/play-button.ts
+if (customElements.get("mbx-play-button") === void 0) customElements.define(PLAY_BUTTON, MbxPlayButton);
+//#endregion
+export { MbxPlayButton };

package/dist/es2015/entries/quality-menu.js

@@ -0,0 +1,7 @@
+import { QUALITY_MENU } from "../tags.js";
+import "../element-entry.js";
+import { MbxQualityMenu } from "../elements/quality-menu.js";
+//#region src/entries/quality-menu.ts
+if (customElements.get("mbx-quality-menu") === void 0) customElements.define(QUALITY_MENU, MbxQualityMenu);
+//#endregion
+export { MbxQualityMenu };

package/dist/es2015/entries/seek-bar.js

@@ -0,0 +1,7 @@
+import { SEEK_BAR } from "../tags.js";
+import "../element-entry.js";
+import { MbxSeekBar } from "../elements/seek-bar.js";
+//#region src/entries/seek-bar.ts
+if (customElements.get("mbx-seek-bar") === void 0) customElements.define(SEEK_BAR, MbxSeekBar);
+//#endregion
+export { MbxSeekBar };

package/dist/es2015/entries/skip-button.js

@@ -0,0 +1,7 @@
+import { SKIP_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxSkipButton } from "../elements/skip-button.js";
+//#region src/entries/skip-button.ts
+if (customElements.get("mbx-skip-button") === void 0) customElements.define(SKIP_BUTTON, MbxSkipButton);
+//#endregion
+export { MbxSkipButton };

package/dist/es2015/entries/spacer.js

@@ -0,0 +1,7 @@
+import { SPACER } from "../tags.js";
+import "../element-entry.js";
+import { MbxSpacer } from "../elements/spacer.js";
+//#region src/entries/spacer.ts
+if (customElements.get("mbx-spacer") === void 0) customElements.define(SPACER, MbxSpacer);
+//#endregion
+export { MbxSpacer };

package/dist/es2015/entries/speed-menu.js

@@ -0,0 +1,7 @@
+import { SPEED_MENU } from "../tags.js";
+import "../element-entry.js";
+import { MbxSpeedMenu } from "../elements/speed-menu.js";
+//#region src/entries/speed-menu.ts
+if (customElements.get("mbx-speed-menu") === void 0) customElements.define(SPEED_MENU, MbxSpeedMenu);
+//#endregion
+export { MbxSpeedMenu };

package/dist/es2015/entries/start-button.js

@@ -0,0 +1,7 @@
+import { START_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxStartButton } from "../elements/start-button.js";
+//#region src/entries/start-button.ts
+if (customElements.get("mbx-start-button") === void 0) customElements.define(START_BUTTON, MbxStartButton);
+//#endregion
+export { MbxStartButton };

package/dist/es2015/entries/subtitles-menu.js

@@ -0,0 +1,7 @@
+import { SUBTITLES_MENU } from "../tags.js";
+import "../element-entry.js";
+import { MbxSubtitlesMenu } from "../elements/subtitles-menu.js";
+//#region src/entries/subtitles-menu.ts
+if (customElements.get("mbx-subtitles-menu") === void 0) customElements.define(SUBTITLES_MENU, MbxSubtitlesMenu);
+//#endregion
+export { MbxSubtitlesMenu };

package/dist/es2015/entries/volume-slider.js

@@ -0,0 +1,7 @@
+import { VOLUME_SLIDER } from "../tags.js";
+import "../element-entry.js";
+import { MbxVolumeSlider } from "../elements/volume-slider.js";
+//#region src/entries/volume-slider.ts
+if (customElements.get("mbx-volume-slider") === void 0) customElements.define(VOLUME_SLIDER, MbxVolumeSlider);
+//#endregion
+export { MbxVolumeSlider };

package/dist/es2015/entries/volume.js

@@ -0,0 +1,9 @@
+import { VOLUME } from "../tags.js";
+import "../element-entry.js";
+import "./mute-button.js";
+import "./volume-slider.js";
+import { MbxVolume } from "../elements/volume.js";
+//#region src/entries/volume.ts
+if (customElements.get("mbx-volume") === void 0) customElements.define(VOLUME, MbxVolume);
+//#endregion
+export { MbxVolume };

package/dist/es2015/host.js

@@ -0,0 +1,23 @@
+import "./tags.js";
+//#region src/host.ts
+/** The parent, or the host of the shadow root `node` sits in, or null at the document. */
+function above(node) {
+	const parent = node.parentNode;
+	if (parent !== null) return parent;
+	return node instanceof ShadowRoot ? node.host : null;
+}
+/**
+* The nearest player above `node`, through shadow hosts, or null outside
+* one. The element found may not be upgraded yet; the caller waits for the
+* definition before reading it.
+*/
+function findPlayer(node) {
+	let current = node;
+	while (current !== null) {
+		if (current instanceof HTMLElement && current.localName === "mattebox-player") return current;
+		current = above(current);
+	}
+	return null;
+}
+//#endregion
+export { findPlayer };

package/dist/es2015/index.js

@@ -1,10 +1,47 @@
-import { LAYOUT } from "./controls/options.js";
 import { MatteboxPlayerElement } from "./element.js";
-//#region src/index.ts
-/**
-* @mattebox/player: the <mattebox-player> custom element. Importing this
-* module registers the element; that is the package's one side effect.
-*/
-MatteboxPlayerElement.define();
-//#endregion
-export { LAYOUT, MatteboxPlayerElement };
+import "./element-entry.js";
+import { MbxAudioMenu } from "./elements/audio-menu.js";
+import "./entries/audio-menu.js";
+import { MbxChaptersMenu } from "./elements/chapters-menu.js";
+import "./entries/chapters-menu.js";
+import { MbxControlBar } from "./elements/control-bar.js";
+import "./entries/control-bar.js";
+import { MbxCurrentTime } from "./elements/current-time.js";
+import "./entries/current-time.js";
+import { MbxDrmBadge } from "./elements/drm-badge.js";
+import "./entries/drm-badge.js";
+import { MbxDuration } from "./elements/duration.js";
+import "./entries/duration.js";
+import { MbxErrorScreen } from "./elements/error-screen.js";
+import "./entries/error-screen.js";
+import { MbxFullscreenButton } from "./elements/fullscreen-button.js";
+import "./entries/fullscreen-button.js";
+import { MbxLiveButton } from "./elements/live-button.js";
+import "./entries/live-button.js";
+import { MbxMuteButton } from "./elements/mute-button.js";
+import "./entries/mute-button.js";
+import { MbxPanels } from "./elements/panels.js";
+import "./entries/panels.js";
+import { MbxPipButton } from "./elements/pip-button.js";
+import "./entries/pip-button.js";
+import { MbxPlayButton } from "./elements/play-button.js";
+import "./entries/play-button.js";
+import { MbxQualityMenu } from "./elements/quality-menu.js";
+import "./entries/quality-menu.js";
+import { MbxSeekBar } from "./elements/seek-bar.js";
+import "./entries/seek-bar.js";
+import { MbxSkipButton } from "./elements/skip-button.js";
+import "./entries/skip-button.js";
+import { MbxSpacer } from "./elements/spacer.js";
+import "./entries/spacer.js";
+import { MbxSpeedMenu } from "./elements/speed-menu.js";
+import "./entries/speed-menu.js";
+import { MbxStartButton } from "./elements/start-button.js";
+import "./entries/start-button.js";
+import { MbxSubtitlesMenu } from "./elements/subtitles-menu.js";
+import "./entries/subtitles-menu.js";
+import { MbxVolumeSlider } from "./elements/volume-slider.js";
+import "./entries/volume-slider.js";
+import { MbxVolume } from "./elements/volume.js";
+import "./entries/volume.js";
+export { MatteboxPlayerElement, MbxAudioMenu, MbxChaptersMenu, MbxControlBar, MbxCurrentTime, MbxDrmBadge, MbxDuration, MbxErrorScreen, MbxFullscreenButton, MbxLiveButton, MbxMuteButton, MbxPanels, MbxPipButton, MbxPlayButton, MbxQualityMenu, MbxSeekBar, MbxSkipButton, MbxSpacer, MbxSpeedMenu, MbxStartButton, MbxSubtitlesMenu, MbxVolume, MbxVolumeSlider };

package/dist/es2015/labels.js

@@ -0,0 +1,14 @@
+//#region src/labels.ts
+/**
+* Label templates: `{name}` in an attribute's text is replaced from the
+* values the element has, and a name it does not have stays as written.
+* Pure, node-tested.
+*/
+function fill(template, values) {
+	return template.replace(/\{(\w+)\}/g, (match, name) => {
+		const value = values[name];
+		return value === void 0 ? match : String(value);
+	});
+}
+//#endregion
+export { fill };

package/dist/es2015/style.js

@@ -1,6 +1,8 @@
 //#region src/style.ts
 /**
-* The default styles. Two rules govern them.
+* The default styles of the element itself: the stage, fullscreen, and the
+* error surface under native controls. Every control carries its own sheet.
+* Two rules govern them.
 *
 * Nothing carries `!important`. For normal declarations the outer tree wins
 * over the shadow tree, so any `::part()` rule the page writes beats these
@@ -31,307 +33,34 @@ const STYLE = `
    would jump to its size on metadata. Auto first, so the natural ratio wins
    once it is known. */
 ::slotted(video) { display: block; width: 100%; aspect-ratio: auto 16 / 9; }
-[part~="controls"] {
-  position: absolute;
-  inset: auto 0 0 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 40px 16px 12px;
-  color: var(--mbx-text);
-  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
-  font: 500 16px/1.2 var(--mbx-font);
-  transition: opacity 0.2s;
-}
-[part~="idle"] { opacity: 0; pointer-events: none; }
-[part~="error-screen"] {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.75);
-  color: var(--mbx-text);
-  font: 400 15px/1.4 var(--mbx-font);
-  text-align: center;
-}
-[part~="error-box"] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
-[part~="error-title"] { font-size: 18px; font-weight: 600; }
-[part~="error-detail"] { font-family: monospace; font-size: 13px; color: var(--mbx-error); }
-[part~="error-retry"] { width: auto; height: 36px; padding: 0 16px; border: 1px solid currentColor; font-weight: 600; }
-[part~="row"] { display: flex; align-items: center; gap: 8px; }
-[part~="seek-row"] { gap: 16px; }
-[part~="current-time"], [part~="duration"] { min-width: 3ch; font-variant-numeric: tabular-nums; white-space: nowrap; }
-[part~="duration"] { text-align: right; }
-[part~="control"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  background: transparent;
-  border: 0;
-  border-radius: var(--mbx-radius);
-  cursor: pointer;
-  opacity: 0.9;
-}
-[part~="control"]:hover { opacity: 1; }
-[part~="start-button"] {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 96px;
-  height: 96px;
-  margin: -48px 0 0 -48px;
-  color: var(--mbx-text);
-  opacity: 0.92;
-  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
-  transition: opacity 0.15s;
-}
-[part~="start-button"]:hover { opacity: 1; }
-[part~="start-button"] [part~="icon"] { width: 72px; height: 72px; }
-[part~="error-screen"] {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.75);
-  color: var(--mbx-text);
-  font: 400 15px/1.4 var(--mbx-font);
-  text-align: center;
-}
-[part~="error-box"] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
-[part~="error-title"] { font-size: 18px; font-weight: 600; }
-[part~="error-detail"] { font-family: monospace; font-size: 13px; color: var(--mbx-error); }
-[part~="error-retry"] { width: auto; height: 36px; padding: 0 16px; border: 1px solid currentColor; font-weight: 600; }
-[part~="row"] { display: flex; align-items: center; gap: 8px; }
-[part~="seek-row"] { gap: 16px; }
-[part~="current-time"], [part~="duration"] { min-width: 3ch; font-variant-numeric: tabular-nums; white-space: nowrap; }
-[part~="duration"] { text-align: right; }
-[part~="control"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  background: transparent;
-  border: 0;
-  border-radius: var(--mbx-radius);
-  cursor: pointer;
-  opacity: 0.9;
-}
-[part~="control"]:hover { opacity: 1; }
-[part~="start-button"] {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 104px;
-  height: 64px;
-  margin: -32px 0 0 -52px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: var(--mbx-radius);
-  background: rgba(0, 0, 0, 0.45);
-  color: var(--mbx-text);
-  opacity: 0.9;
-  transition: opacity 0.15s, background 0.15s;
-}
-[part~="start-button"]:hover { opacity: 1; background: rgba(0, 0, 0, 0.6); }
-[part~="start-button"] [part~="icon"] { width: 40px; height: 40px; margin-left: 2px; }
-[part~="icon"] { width: 1.75em; height: 1.75em; fill: currentColor; }
-[part~="slider"] {
-  position: relative;
-  flex: none;
-  height: 40px;
-  border-radius: var(--mbx-radius);
-  cursor: pointer;
-  touch-action: none;
-}
-[part~="rail"] { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }
-[part~="seek"] { flex: 1; }
-[part~="track"] {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 4px;
-  transform: translateY(-50%);
-  background: rgba(255, 255, 255, 0.35);
-  border-radius: 2px;
-  overflow: hidden;
-}
-[part~="fill"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }
-[part~="thumb"] {
-  position: absolute;
-  top: 50%;
-  width: 16px;
-  height: 16px;
-  margin: -8px 0 0 -8px;
-  border-radius: 50%;
-  background: var(--mbx-text);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  pointer-events: none;
-}
-[part~="buffered"] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
-[part~="buffered-range"] { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.3); }
-[part~="hover"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-text); }
-[part~="edge"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-live); }
-[part~="preview"] {
-  position: absolute;
-  bottom: 100%;
-  margin-bottom: 4px;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  padding: 2px;
-  background: var(--mbx-surface);
-  border-radius: var(--mbx-radius);
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  pointer-events: none;
-}
-[part~="preview-image"] { position: relative; overflow: hidden; border-radius: 2px; }
-[part~="preview-tile"] { position: absolute; top: 0; left: 0; transform-origin: top left; background-repeat: no-repeat; }
-[part~="preview-time"] { padding: 0 4px; }
-[part~="volume-group"] { display: flex; align-items: center; }
-[part~="volume"] { width: 0; opacity: 0; transition: width 0.2s ease, opacity 0.2s ease; }
-/* Two attributes in one selector, the one place: the slider unfolds from
-   its group under the pointer or focus, and a page reaches it through
-   ::part(volume) all the same. */
-[part~="volume-group"]:hover [part~="volume"] { width: 80px; opacity: 1; }
-[part~="volume-group"]:focus-within [part~="volume"] { width: 80px; opacity: 1; }
-[part~="cluster"] { display: flex; align-items: center; gap: 4px; margin-left: auto; }
-[part~="live-button"] { width: auto; gap: 6px; padding: 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
-[part~="live-button"]:disabled { cursor: default; opacity: 1; }
-[part~="live-dot"] { width: 10px; height: 10px; border-radius: 50%; background: var(--mbx-muted); transition: background 0.2s; }
-/* Two attributes, as with the volume: the dot reads the button's state. */
-[part~="live-dot"][part~="at-edge"] { background: var(--mbx-live); box-shadow: 0 0 6px var(--mbx-live); }
-[part~="slot"] { display: contents; }
-[part~="menu"] { position: relative; }
-[part~="popup"] {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  margin-bottom: 8px;
-  min-width: 160px;
-  padding: 6px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  background: rgba(16, 17, 20, 0.95);
-  border-radius: var(--mbx-radius);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-  font-size: 14px;
-}
-[part~="section"] { display: flex; flex-direction: column; }
-[part~="section"] + [part~="section"] { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
-[part~="section-label"] { padding: 4px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mbx-muted); }
-[part~="item"] {
-  display: block;
-  width: 100%;
-  padding: 8px 12px 8px 28px;
-  font: inherit;
-  color: inherit;
-  text-align: left;
-  white-space: nowrap;
-  background: transparent;
-  border: 0;
-  border-radius: var(--mbx-radius);
-  cursor: pointer;
-}
-[part~="item"]:hover { background: rgba(255, 255, 255, 0.12); }
-[part~="item"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="page-item"] { position: relative; padding-right: 28px; }
-[part~="page-item"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: 0.7; }
-[part~="back-item"] { position: relative; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; margin-bottom: 6px; }
-[part~="back-item"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 0 0 1.5px; transform: rotate(-45deg); opacity: 0.7; }
-[part~="checked"] { position: relative; }
-[part~="checked"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mbx-accent); }
-[part~="drm-badge"] { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--mbx-muted); border-radius: var(--mbx-radius); cursor: default; }
-[part~="drm-badge"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="tooltip"] {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  margin-bottom: 8px;
-  padding: 8px 10px;
-  background: rgba(16, 17, 20, 0.95);
-  border-radius: var(--mbx-radius);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-  color: var(--mbx-text);
-  font-size: 13px;
-  line-height: 1.4;
-  text-align: left;
-  white-space: nowrap;
-  pointer-events: none;
-}
-[part~="tooltip-title"] { font-weight: 600; }
-[part~="tooltip-text"] { color: var(--mbx-muted); }
-[part~="track"] {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 4px;
-  transform: translateY(-50%);
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 2px;
-  overflow: hidden;
-}
-[part~="fill"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }
-[part~="thumb"] {
-  position: absolute;
-  top: 50%;
-  width: 12px;
-  height: 12px;
-  margin: -6px 0 0 -6px;
-  border-radius: 50%;
-  background: var(--mbx-text);
-  pointer-events: none;
-}
 :host(:focus-visible) [part~="stage"] { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="control"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="slider"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="stage"]:fullscreen { display: flex; background: #000; }
-[part~="stage"]:fullscreen ::slotted(video) { height: 100%; object-fit: contain; }
-[part~="stage"]:-webkit-full-screen { display: flex; background: #000; }
-[part~="stage"]:-webkit-full-screen ::slotted(video) { height: 100%; object-fit: contain; }
-@media (prefers-reduced-motion: reduce) {
-  [part~="controls"] { transition: none; }
-  [part~="volume"] { transition: none; }
-  [part~="live-dot"] { transition: none; }
-  [part~="start-button"] { transition: none; }
-}
-[part~="panels"], [part~="error"] {
+/* Fullscreen goes on the host, so every control the page placed inside
+   comes along. The stage takes the height and the video sits in it. The
+   height comes from the browser, which gives the fullscreen element the
+   whole screen with !important, and not from a display on the host:
+   a page's own "mattebox-player { display: block }" beats a :host()
+   rule, so nothing here may depend on one. The error surface, which sits
+   under the stage in the page, goes over its foot instead. */
+:host(:fullscreen) { background: #000; }
+:host(:fullscreen) [part~="stage"] { height: 100%; display: flex; }
+:host(:fullscreen) ::slotted(video) { height: 100%; object-fit: contain; }
+:host(:fullscreen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
+:host(:-webkit-full-screen) { background: #000; }
+:host(:-webkit-full-screen) [part~="stage"] { height: 100%; display: flex; }
+:host(:-webkit-full-screen) ::slotted(video) { height: 100%; object-fit: contain; }
+:host(:-webkit-full-screen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
+[part~="error"] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--mbx-gap);
   padding: var(--mbx-pad);
   background: var(--mbx-surface);
-  color: var(--mbx-text);
+  color: var(--mbx-error);
   font: 400 13px/1.4 var(--mbx-font);
 }
-[part~="panels"]:empty { display: none; }
-[part~="panel"] { display: flex; align-items: center; gap: 6px; }
-[part~="label"] { display: flex; align-items: center; gap: 6px; }
-[part~="text"] { color: var(--mbx-muted); }
 [part~="value"] { color: var(--mbx-accent); }
-[part~="select"], [part~="button"] {
+[part~="button"] {
   font: inherit;
   color: inherit;
   background: transparent;
@@ -339,8 +68,6 @@ const STYLE = `
   border-radius: var(--mbx-radius);
   padding: 2px 6px;
 }
-[part~="button"][disabled] { opacity: 0.5; }
-[part~="error"] { color: var(--mbx-error); }
 [hidden] { display: none; }
 `;
 //#endregion

package/dist/es2015/{panels/error.js → surface.js}

@@ -1,7 +1,7 @@
-import { el } from "../dom.js";
-//#region src/panels/error.ts
+import { el } from "./dom.js";
+//#region src/surface.ts
 function errorSurface(retry) {
-	const root = el("div", "panel error");
+	const root = el("div", "error");
 	const category = el("span", "value error-category");
 	const code = el("span", "value error-code");
 	const button = el("button", "button error-retry", "Retry");

package/dist/es2015/tags.js

@@ -0,0 +1,27 @@
+//#region src/tags.ts
+/** The tag names, in one place, so the composition and the lookup agree with the registration. */
+const PLAYER = "mattebox-player";
+const CONTROL_BAR = "mbx-control-bar";
+const SPACER = "mbx-spacer";
+const PLAY_BUTTON = "mbx-play-button";
+const MUTE_BUTTON = "mbx-mute-button";
+const VOLUME_SLIDER = "mbx-volume-slider";
+const SKIP_BUTTON = "mbx-skip-button";
+const PIP_BUTTON = "mbx-pip-button";
+const FULLSCREEN_BUTTON = "mbx-fullscreen-button";
+const START_BUTTON = "mbx-start-button";
+const ERROR_SCREEN = "mbx-error-screen";
+const CURRENT_TIME = "mbx-current-time";
+const DURATION = "mbx-duration";
+const SEEK_BAR = "mbx-seek-bar";
+const LIVE_BUTTON = "mbx-live-button";
+const SPEED_MENU = "mbx-speed-menu";
+const QUALITY_MENU = "mbx-quality-menu";
+const AUDIO_MENU = "mbx-audio-menu";
+const SUBTITLES_MENU = "mbx-subtitles-menu";
+const DRM_BADGE = "mbx-drm-badge";
+const PANELS = "mbx-panels";
+const VOLUME = "mbx-volume";
+const CHAPTERS_MENU = "mbx-chapters-menu";
+//#endregion
+export { AUDIO_MENU, CHAPTERS_MENU, CONTROL_BAR, CURRENT_TIME, DRM_BADGE, DURATION, ERROR_SCREEN, FULLSCREEN_BUTTON, LIVE_BUTTON, MUTE_BUTTON, PANELS, PIP_BUTTON, PLAYER, PLAY_BUTTON, QUALITY_MENU, SEEK_BAR, SKIP_BUTTON, SPACER, SPEED_MENU, START_BUTTON, SUBTITLES_MENU, VOLUME, VOLUME_SLIDER };

package/dist/host.d.ts

@@ -0,0 +1,26 @@
+/**
+ * What a control sees of the player it sits in: the video, the engine, the
+ * core, and the element itself for its events and attributes. Declared
+ * here and not imported from the element, because the element registers
+ * the controls and a control that imported the element would close a cycle.
+ * `MatteboxPlayerElement` implements it.
+ *
+ * This is the whole surface a control gets. A control that needs more
+ * has found a gap in the player's public API, and the gap is the bug.
+ */
+import type { Player, PlayerError } from '@mattebox/player-core';
+import type { Mattebox } from 'mattebox';
+export interface PlayerHost extends HTMLElement {
+    readonly video: HTMLVideoElement;
+    readonly engine: Mattebox | null;
+    readonly player: Player | null;
+    /** The fatal error of the current load, or null: a control attached after the event still sees it. */
+    readonly error: PlayerError | null;
+}
+/**
+ * The nearest player above `node`, through shadow hosts, or null outside
+ * one. The element found may not be upgraded yet; the caller waits for the
+ * definition before reading it.
+ */
+export declare function findPlayer(node: Node): HTMLElement | null;
+//# sourceMappingURL=host.d.ts.map

package/dist/host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../src/host.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,sGAAsG;IACtG,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CACpC;AASD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,GAAG,IAAI,CAOzD"}