@mattebox/player 0.1.0 → 0.2.0

package/dist/host.js

@@ -0,0 +1,23 @@
+import { PLAYER } from './tags.js';
+/** 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.
+ */
+export function findPlayer(node) {
+    let current = node;
+    while (current !== null) {
+        if (current instanceof HTMLElement && current.localName === PLAYER)
+            return current;
+        current = above(current);
+    }
+    return null;
+}
+//# sourceMappingURL=host.js.map

package/dist/host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.js","sourceRoot":"","sources":["../src/host.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAUnC,0FAA0F;AAC1F,SAAS,KAAK,CAAC,IAAU;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;IAC/B,IAAI,MAAM,KAAK,IAAI;QAAE,OAAO,MAAM,CAAC;IACnC,OAAO,IAAI,YAAY,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AACvD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,IAAU;IACnC,IAAI,OAAO,GAAgB,IAAI,CAAC;IAChC,OAAO,OAAO,KAAK,IAAI,EAAE,CAAC;QACxB,IAAI,OAAO,YAAY,WAAW,IAAI,OAAO,CAAC,SAAS,KAAK,MAAM;YAAE,OAAO,OAAO,CAAC;QACnF,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,82 @@
-export type { ControlsOptions } from './controls/options.js';
-export { LAYOUT } from './controls/options.js';
-export { MatteboxPlayerElement } from './element.js';
+/**
+ * @mattebox/player: the <mattebox-player> custom element and every control
+ * that goes inside it. Importing this module registers them all; that is
+ * the package's one side effect. A page that wants only some takes
+ * `@mattebox/player/element` and the `@mattebox/player/elements/*` entries.
+ */
+import type { MatteboxPlayerElement } from './element-entry.js';
+import type { MbxAudioMenu } from './entries/audio-menu.js';
+import type { MbxChaptersMenu } from './entries/chapters-menu.js';
+import type { MbxControlBar } from './entries/control-bar.js';
+import type { MbxCurrentTime } from './entries/current-time.js';
+import type { MbxDrmBadge } from './entries/drm-badge.js';
+import type { MbxDuration } from './entries/duration.js';
+import type { MbxErrorScreen } from './entries/error-screen.js';
+import type { MbxFullscreenButton } from './entries/fullscreen-button.js';
+import type { MbxLiveButton } from './entries/live-button.js';
+import type { MbxMuteButton } from './entries/mute-button.js';
+import type { MbxPanels } from './entries/panels.js';
+import type { MbxPipButton } from './entries/pip-button.js';
+import type { MbxPlayButton } from './entries/play-button.js';
+import type { MbxQualityMenu } from './entries/quality-menu.js';
+import type { MbxSeekBar } from './entries/seek-bar.js';
+import type { MbxSkipButton } from './entries/skip-button.js';
+import type { MbxSpacer } from './entries/spacer.js';
+import type { MbxSpeedMenu } from './entries/speed-menu.js';
+import type { MbxStartButton } from './entries/start-button.js';
+import type { MbxSubtitlesMenu } from './entries/subtitles-menu.js';
+import type { MbxVolume } from './entries/volume.js';
+import type { MbxVolumeSlider } from './entries/volume-slider.js';
+export type { MatteboxPlayerOptions } from './element-entry.js';
+export { MatteboxPlayerElement } from './element-entry.js';
+export { MbxAudioMenu } from './entries/audio-menu.js';
+export { MbxChaptersMenu } from './entries/chapters-menu.js';
+export { MbxControlBar } from './entries/control-bar.js';
+export { MbxCurrentTime } from './entries/current-time.js';
+export { MbxDrmBadge } from './entries/drm-badge.js';
+export { MbxDuration } from './entries/duration.js';
+export { MbxErrorScreen } from './entries/error-screen.js';
+export { MbxFullscreenButton } from './entries/fullscreen-button.js';
+export { MbxLiveButton } from './entries/live-button.js';
+export { MbxMuteButton } from './entries/mute-button.js';
+export { MbxPanels } from './entries/panels.js';
+export { MbxPipButton } from './entries/pip-button.js';
+export { MbxPlayButton } from './entries/play-button.js';
+export { MbxQualityMenu } from './entries/quality-menu.js';
+export { MbxSeekBar } from './entries/seek-bar.js';
+export { MbxSkipButton } from './entries/skip-button.js';
+export { MbxSpacer } from './entries/spacer.js';
+export { MbxSpeedMenu } from './entries/speed-menu.js';
+export { MbxStartButton } from './entries/start-button.js';
+export { MbxSubtitlesMenu } from './entries/subtitles-menu.js';
+export { MbxVolume } from './entries/volume.js';
+export { MbxVolumeSlider } from './entries/volume-slider.js';
+export type { PlayerHost } from './host.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mattebox-player': MatteboxPlayerElement;
+        'mbx-control-bar': MbxControlBar;
+        'mbx-spacer': MbxSpacer;
+        'mbx-play-button': MbxPlayButton;
+        'mbx-mute-button': MbxMuteButton;
+        'mbx-volume-slider': MbxVolumeSlider;
+        'mbx-volume': MbxVolume;
+        'mbx-skip-button': MbxSkipButton;
+        'mbx-pip-button': MbxPipButton;
+        'mbx-fullscreen-button': MbxFullscreenButton;
+        'mbx-start-button': MbxStartButton;
+        'mbx-error-screen': MbxErrorScreen;
+        'mbx-current-time': MbxCurrentTime;
+        'mbx-duration': MbxDuration;
+        'mbx-seek-bar': MbxSeekBar;
+        'mbx-live-button': MbxLiveButton;
+        'mbx-speed-menu': MbxSpeedMenu;
+        'mbx-quality-menu': MbxQualityMenu;
+        'mbx-audio-menu': MbxAudioMenu;
+        'mbx-subtitles-menu': MbxSubtitlesMenu;
+        'mbx-drm-badge': MbxDrmBadge;
+        'mbx-chapters-menu': MbxChaptersMenu;
+        'mbx-panels': MbxPanels;
+    }
+}
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,qBAAqB,CAAC,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AA+BA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/labels.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export declare function fill(template: string, values: Readonly<Record<string, string | number>>): string;
+//# sourceMappingURL=labels.d.ts.map

package/dist/labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../src/labels.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAKhG"}

package/dist/labels.js

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+export function fill(template, values) {
+    return template.replace(/\{(\w+)\}/g, (match, name) => {
+        const value = values[name];
+        return value === undefined ? match : String(value);
+    });
+}
+//# sourceMappingURL=labels.js.map

package/dist/labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.js","sourceRoot":"","sources":["../src/labels.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAC,QAAgB,EAAE,MAAiD;IACtF,OAAO,QAAQ,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE;QACpE,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;QAC3B,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/style.d.ts

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

package/dist/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,umZA4UjB,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,s0EAyDjB,CAAC"}

package/dist/style.js

@@ -1,5 +1,7 @@
 /**
- * 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
@@ -30,307 +32,34 @@ export 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;
@@ -338,8 +67,6 @@ export 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; }
 `;
 //# sourceMappingURL=style.js.map

package/dist/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4UpB,CAAC"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDpB,CAAC"}

package/dist/surface.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The error surface under native controls: a row under the video with the
+ * category, the code and a retry. It outlives a session, because the core
+ * reports "no handler claimed this source" when there is no session to
+ * hang it on. It stays hidden until a fatal error arrives, and under
+ * custom controls the error screen element carries the error instead.
+ */
+import type { PlayerError } from '@mattebox/player-core';
+export interface ErrorSurface {
+    readonly root: HTMLElement;
+    show(error: PlayerError): void;
+    clear(): void;
+}
+export declare function errorSurface(retry: () => void): ErrorSurface;
+//# sourceMappingURL=surface.d.ts.map

package/dist/surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../src/surface.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,IAAI,IAAI,CAAC;CACf;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,YAAY,CAqB5D"}

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

@@ -1,6 +1,6 @@
-import { el } from '../dom.js';
+import { el } from './dom.js';
 export 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');
@@ -20,4 +20,4 @@ export function errorSurface(retry) {
         },
     };
 }
-//# sourceMappingURL=error.js.map
+//# sourceMappingURL=surface.js.map

package/dist/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","sourceRoot":"","sources":["../src/surface.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAQ9B,MAAM,UAAU,YAAY,CAAC,KAAiB;IAC5C,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAChC,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IACpD,MAAM,IAAI,GAAG,EAAE,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,EAAE,CAAC,QAAQ,EAAE,oBAAoB,EAAE,OAAO,CAAC,CAAC;IAC3D,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACxC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IAEnB,OAAO;QACL,IAAI;QACJ,IAAI,CAAC,KAAkB;YACrB,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC;YACtC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QACD,KAAK;YACH,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;KACF,CAAC;AACJ,CAAC"}