@mattebox/player-diagnostics 0.1.0

package/dist/es2015/host.js

@@ -0,0 +1,34 @@
+//#region src/host.ts
+const PLAYER = "mattebox-player";
+/** 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`, or null outside one. It may not be upgraded yet. */
+function findPlayer(node) {
+	let current = node;
+	while (current !== null) {
+		if (current instanceof HTMLElement && current.localName === "mattebox-player") return current;
+		current = above(current);
+	}
+	return null;
+}
+/** Runs `fn` with the player once it is defined and upgraded, unless cancelled before. */
+function whenPlayer(found, fn) {
+	let waiting = true;
+	const ready = () => {
+		if (!waiting) return;
+		waiting = false;
+		customElements.upgrade(found);
+		if ("video" in found) fn(found);
+	};
+	if ("video" in found) ready();
+	else customElements.whenDefined(PLAYER).then(ready);
+	return () => {
+		waiting = false;
+	};
+}
+//#endregion
+export { PLAYER, findPlayer, whenPlayer };

package/dist/es2015/icon.js

@@ -0,0 +1,46 @@
+//#region src/icon.ts
+/**
+* The glyph, copied from Vidstack's media-icons 0.10.0
+* (https://github.com/vidstack/media-icons), the same set the player draws
+* its own from: filled paths on a 32-unit viewBox. Copied, not depended
+* on; the notice ships as NOTICE in the package.
+*
+* MIT License
+*
+* Copyright (c) 2023 Rahim Alwer
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*/
+/** The "info" glyph: a ring with a dot and a bar, drawn even-odd so the ring is hollow. */
+const INFO = "M17.534 10.6674C17.534 11.5143 16.8475 12.2008 16.0006 12.2008C15.1538 12.2008 14.4673 11.5143 14.4673 10.6674C14.4673 9.82061 15.1538 9.13411 16.0006 9.13411C16.8475 9.13411 17.534 9.82061 17.534 10.6674Z M14.6678 14.2005C14.6678 13.8323 14.9663 13.5339 15.3345 13.5339H16.6678C17.036 13.5339 17.3345 13.8323 17.3345 14.2005V22.2005C17.3345 22.5687 17.036 22.8672 16.6678 22.8672H15.3345C14.9663 22.8672 14.6678 22.5687 14.6678 22.2005V14.2005Z M28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16ZM24.9333 16C24.9333 20.9337 20.9337 24.9333 16 24.9333C11.0663 24.9333 7.06667 20.9337 7.06667 16C7.06667 11.0663 11.0663 7.06667 16 7.06667C20.9337 7.06667 24.9333 11.0663 24.9333 16Z";
+const SVG = "http://www.w3.org/2000/svg";
+/** The glyph, hidden from the accessibility tree: the button carries the name. */
+function icon() {
+	const svg = document.createElementNS(SVG, "svg");
+	svg.setAttribute("viewBox", "0 0 32 32");
+	svg.setAttribute("aria-hidden", "true");
+	svg.setAttribute("part", "icon");
+	const path = document.createElementNS(SVG, "path");
+	path.setAttribute("fill-rule", "evenodd");
+	path.setAttribute("d", INFO);
+	svg.append(path);
+	return svg;
+}
+//#endregion
+export { icon };

package/dist/es2015/index.js

@@ -0,0 +1,15 @@
+import { probeSupport } from "./support.js";
+import { MbxDiagnostics } from "./element.js";
+//#region src/index.ts
+/**
+* @mattebox/player-diagnostics: <mbx-diagnostics>, a control for the
+* player's bar, or a panel under the video, that shows what the session
+* is doing and what the browser can do, and writes a report. Importing
+* this module registers the element; that is the package's one side
+* effect. It reaches the player only through the contract a control of
+* the page's own has, and the engine through its public surface.
+*/
+const DIAGNOSTICS = "mbx-diagnostics";
+if (customElements.get("mbx-diagnostics") === void 0) customElements.define(DIAGNOSTICS, MbxDiagnostics);
+//#endregion
+export { DIAGNOSTICS, MbxDiagnostics, probeSupport };

package/dist/es2015/report.js

@@ -0,0 +1,145 @@
+//#region src/report.ts
+function ranges(list) {
+	return Array.from({ length: list.length }, (_, i) => ({
+		start: list.start(i),
+		end: list.end(i)
+	}));
+}
+function playbackFacts(video) {
+	var _video$getVideoPlayba;
+	const quality = (_video$getVideoPlayba = video.getVideoPlaybackQuality) === null || _video$getVideoPlayba === void 0 ? void 0 : _video$getVideoPlayba.call(video);
+	return {
+		currentTime: video.currentTime,
+		duration: video.duration,
+		paused: video.paused,
+		ended: video.ended,
+		seeking: video.seeking,
+		readyState: video.readyState,
+		networkState: video.networkState,
+		playbackRate: video.playbackRate,
+		volume: video.volume,
+		muted: video.muted,
+		videoWidth: video.videoWidth,
+		videoHeight: video.videoHeight,
+		buffered: ranges(video.buffered),
+		seekable: ranges(video.seekable),
+		frames: quality === void 0 ? null : {
+			decoded: quality.totalVideoFrames,
+			dropped: quality.droppedVideoFrames
+		},
+		mediaError: video.error === null ? null : {
+			code: video.error.code,
+			message: video.error.message
+		}
+	};
+}
+function engineFacts(engine) {
+	var _optional$live$latenc, _optional$live, _engine$quality$playi, _engine$quality$playi2, _engine$quality$activ, _engine$quality$activ2, _error$context;
+	const state = engine.stats.snapshot();
+	const optional = engine;
+	const error = engine.error;
+	return {
+		phase: state.lifecycle.phase,
+		capabilities: [...engine.capabilities()],
+		throughput: {
+			slow: state.stats.throughputEwma,
+			fast: state.stats.throughputFastEwma
+		},
+		bufferGoal: state.scheduling.bufferGoal,
+		buffers: [...state.buffers.entries()].map(([id, buffer]) => ({
+			id,
+			codecs: buffer.codecs,
+			ranges: buffer.ranges.map((range) => ({
+				start: range.start,
+				end: range.end
+			}))
+		})),
+		inflight: [...state.scheduling.inflight.values()].map((request) => ({
+			trackId: request.trackId,
+			seq: request.seq,
+			url: request.url
+		})),
+		live: state.live === null ? null : {
+			start: state.live.span.start,
+			end: state.live.span.end,
+			edge: state.live.edge,
+			latency: (_optional$live$latenc = (_optional$live = optional.live) === null || _optional$live === void 0 ? void 0 : _optional$live.latency) !== null && _optional$live$latenc !== void 0 ? _optional$live$latenc : null
+		},
+		tracks: {
+			active: Object.fromEntries([
+				"video",
+				"audio",
+				"text"
+			].map((type) => {
+				var _engine$tracks$active, _engine$tracks$active2;
+				return [type, (_engine$tracks$active = (_engine$tracks$active2 = engine.tracks.active(type)) === null || _engine$tracks$active2 === void 0 ? void 0 : _engine$tracks$active2.id) !== null && _engine$tracks$active !== void 0 ? _engine$tracks$active : null];
+			})),
+			available: engine.tracks.available.map((track) => {
+				var _track$lang, _track$role;
+				return {
+					id: track.id,
+					contentType: track.contentType,
+					mimeType: track.mimeType,
+					lang: (_track$lang = track.lang) !== null && _track$lang !== void 0 ? _track$lang : null,
+					role: (_track$role = track.role) !== null && _track$role !== void 0 ? _track$role : null,
+					renditions: track.renditions.length
+				};
+			})
+		},
+		quality: {
+			playing: (_engine$quality$playi = (_engine$quality$playi2 = engine.quality.playing) === null || _engine$quality$playi2 === void 0 ? void 0 : _engine$quality$playi2.id) !== null && _engine$quality$playi !== void 0 ? _engine$quality$playi : null,
+			active: (_engine$quality$activ = (_engine$quality$activ2 = engine.quality.active) === null || _engine$quality$activ2 === void 0 ? void 0 : _engine$quality$activ2.id) !== null && _engine$quality$activ !== void 0 ? _engine$quality$activ : null,
+			pinned: engine.quality.pinned,
+			allowed: engine.quality.allowed.map((r) => r.id),
+			renditions: engine.quality.renditions.map((r) => {
+				var _r$width, _r$height, _r$frameRate;
+				return {
+					id: r.id,
+					bitrate: r.bitrate,
+					width: (_r$width = r.width) !== null && _r$width !== void 0 ? _r$width : null,
+					height: (_r$height = r.height) !== null && _r$height !== void 0 ? _r$height : null,
+					frameRate: (_r$frameRate = r.frameRate) !== null && _r$frameRate !== void 0 ? _r$frameRate : null,
+					codecs: r.codecs
+				};
+			})
+		},
+		drm: optional.drm === void 0 ? null : {
+			keySystem: optional.drm.keySystem,
+			sessions: [...optional.drm.sessions]
+		},
+		error: error === null ? null : {
+			category: error.category,
+			code: error.code,
+			fatal: error.fatal,
+			recoverable: error.recoverable,
+			context: (_error$context = error.context) !== null && _error$context !== void 0 ? _error$context : null
+		}
+	};
+}
+const KEEP_MS = 12e4;
+function buildReport(sources) {
+	var _player$player$sessio, _player$player;
+	const { player } = sources;
+	const engine = player.engine;
+	const samples = sources.samples.slice(-240);
+	const since = performance.now() - KEEP_MS;
+	return {
+		at: (/* @__PURE__ */ new Date()).toISOString(),
+		userAgent: navigator.userAgent,
+		source: {
+			url: player.getAttribute("src"),
+			type: player.getAttribute("type"),
+			handler: (_player$player$sessio = (_player$player = player.player) === null || _player$player === void 0 || (_player$player = _player$player.session) === null || _player$player === void 0 ? void 0 : _player$player.handler) !== null && _player$player$sessio !== void 0 ? _player$player$sessio : null
+		},
+		playback: playbackFacts(player.video),
+		error: player.error,
+		engine: engine === null ? null : engineFacts(engine),
+		counters: sources.counters,
+		samples,
+		marks: sources.marks.filter((mark) => mark.t >= since),
+		support: sources.support,
+		trace: engine === null ? null : sources.history
+	};
+}
+//#endregion
+export { buildReport, engineFacts, playbackFacts };

package/dist/es2015/sampler.js

@@ -0,0 +1,196 @@
+import { slimEntry } from "./trace.js";
+//#region src/sampler.ts
+/** Twenty minutes at two samples a second. */
+const MAX_SAMPLES = 2400;
+/** Trace entries kept, the engine's own default for a ring. */
+const MAX_HISTORY = 500;
+const RECOVERY = /* @__PURE__ */ new Set([
+	"nudge",
+	"flush",
+	"skip",
+	"gap-jump"
+]);
+/** A rendition's name for a mark: its height, else its bitrate. */
+function label(r) {
+	return r.height !== void 0 ? `${r.height}p` : `${Math.round(r.bitrate / 1e3)} kbps`;
+}
+function createSampler() {
+	let samples = [];
+	let marks = [];
+	let history = [];
+	/** Entries already taken, so the event and the ring never count one twice. */
+	let seen = /* @__PURE__ */ new WeakSet();
+	let off = null;
+	let last = null;
+	let lastT = 0;
+	let lastQuality = null;
+	let lastPlayingId = null;
+	let stallStart = null;
+	let stalls = 0;
+	let stalledTotal = 0;
+	let switches = 0;
+	let decoded = 0;
+	let dropped = 0;
+	function push(mark) {
+		marks.push(mark);
+		if (marks.length > MAX_SAMPLES * 2) marks.splice(0, marks.length - MAX_SAMPLES * 2);
+	}
+	/** The trace entries since the last read, oldest first. */
+	function fresh(engine) {
+		const trace = engine.stats.trace();
+		let from = 0;
+		if (last !== null) {
+			const at = trace.indexOf(last);
+			from = at >= 0 ? at + 1 : trace.findIndex((entry) => entry.t > lastT);
+			if (from < 0) from = trace.length;
+		}
+		const tail = trace[trace.length - 1];
+		if (tail !== void 0) {
+			last = tail;
+			lastT = tail.t;
+		}
+		return trace.slice(from);
+	}
+	/** One entry in: its marks for the charts, and its slimmed self for the history. */
+	function take(entry, video) {
+		if (seen.has(entry)) return;
+		seen.add(entry);
+		history.push(slimEntry(entry));
+		if (history.length > MAX_HISTORY) history.splice(0, history.length - MAX_HISTORY);
+		{
+			const msg = entry.msg;
+			if (msg.type === "SEGMENT_LOADED" && msg.trackId !== "manifest" && msg.size > 0) push({
+				t: entry.t,
+				kind: "segment",
+				value: msg.size * 8e3 / Math.max(msg.rtt, 1),
+				label: `${msg.trackId} #${msg.seq}`,
+				trackId: msg.trackId
+			});
+			else if (msg.type === "STALLED") push({
+				t: entry.t,
+				kind: "stall",
+				value: msg.at,
+				label: `stalled at ${msg.at.toFixed(1)}s`
+			});
+			else if (msg.type === "SEEKING") push({
+				t: entry.t,
+				kind: "seek",
+				value: msg.to,
+				label: `seek to ${msg.to.toFixed(1)}s`
+			});
+			for (const effect of entry.effects) {
+				if (effect.kind !== "emit") continue;
+				const name = effect.event.replace("recovery:", "");
+				if (RECOVERY.has(name)) push({
+					t: entry.t,
+					kind: name,
+					value: video.currentTime,
+					label: `recovery ${name}`
+				});
+			}
+		}
+	}
+	function reset() {
+		samples = [];
+		marks = [];
+		history = [];
+		seen = /* @__PURE__ */ new WeakSet();
+		last = null;
+		lastT = 0;
+		lastQuality = null;
+		lastPlayingId = null;
+		stallStart = null;
+		stalls = 0;
+		stalledTotal = 0;
+		switches = 0;
+		decoded = 0;
+		dropped = 0;
+	}
+	function release() {
+		off === null || off === void 0 || off();
+		off = null;
+	}
+	return {
+		attach(video, engine) {
+			release();
+			reset();
+			if (engine === null) return;
+			off = engine.on("trace", (entry) => {
+				take(entry, video);
+			});
+		},
+		release,
+		poll(video, engine) {
+			var _engine$stats$snapsho, _engine$quality$playi, _video$getVideoPlayba, _quality$totalVideoFr, _quality$droppedVideo, _state$stats$throughp, _state$stats$throughp2, _playing$id, _playing$bitrate, _playing$height2;
+			const now = performance.now();
+			if (engine !== null) for (const entry of fresh(engine)) take(entry, video);
+			const state = (_engine$stats$snapsho = engine === null || engine === void 0 ? void 0 : engine.stats.snapshot()) !== null && _engine$stats$snapsho !== void 0 ? _engine$stats$snapsho : null;
+			const playing = (_engine$quality$playi = engine === null || engine === void 0 ? void 0 : engine.quality.playing) !== null && _engine$quality$playi !== void 0 ? _engine$quality$playi : null;
+			const quality = (_video$getVideoPlayba = video.getVideoPlaybackQuality) === null || _video$getVideoPlayba === void 0 ? void 0 : _video$getVideoPlayba.call(video);
+			decoded = (_quality$totalVideoFr = quality === null || quality === void 0 ? void 0 : quality.totalVideoFrames) !== null && _quality$totalVideoFr !== void 0 ? _quality$totalVideoFr : 0;
+			dropped = (_quality$droppedVideo = quality === null || quality === void 0 ? void 0 : quality.droppedVideoFrames) !== null && _quality$droppedVideo !== void 0 ? _quality$droppedVideo : 0;
+			const droppedDelta = lastQuality === null ? 0 : Math.max(0, dropped - lastQuality.dropped);
+			const decodedDelta = lastQuality === null ? 0 : Math.max(0, decoded - lastQuality.decoded);
+			lastQuality = {
+				dropped,
+				decoded
+			};
+			let ahead = 0;
+			for (let i = 0; i < video.buffered.length; i += 1) if (video.buffered.start(i) <= video.currentTime + .25 && video.buffered.end(i) > video.currentTime) ahead = video.buffered.end(i) - video.currentTime;
+			const stalled = !video.paused && !video.ended && !video.seeking && video.readyState < 3 && video.currentTime > 0;
+			if (stalled && stallStart === null) {
+				stallStart = now;
+				stalls += 1;
+			} else if (!stalled && stallStart !== null) {
+				stalledTotal += (now - stallStart) / 1e3;
+				stallStart = null;
+			}
+			if (playing !== null && lastPlayingId !== null && playing.id !== lastPlayingId) {
+				var _playing$height;
+				switches += 1;
+				push({
+					t: now,
+					kind: "switch",
+					value: (_playing$height = playing.height) !== null && _playing$height !== void 0 ? _playing$height : playing.bitrate,
+					label: `now ${label(playing)}`
+				});
+			}
+			if (playing !== null) lastPlayingId = playing.id;
+			samples.push({
+				t: now,
+				currentTime: video.currentTime,
+				slow: (_state$stats$throughp = state === null || state === void 0 ? void 0 : state.stats.throughputEwma) !== null && _state$stats$throughp !== void 0 ? _state$stats$throughp : 0,
+				fast: (_state$stats$throughp2 = state === null || state === void 0 ? void 0 : state.stats.throughputFastEwma) !== null && _state$stats$throughp2 !== void 0 ? _state$stats$throughp2 : 0,
+				ahead,
+				stalled,
+				dropped: droppedDelta,
+				decoded: decodedDelta,
+				playingId: (_playing$id = playing === null || playing === void 0 ? void 0 : playing.id) !== null && _playing$id !== void 0 ? _playing$id : null,
+				playingBitrate: (_playing$bitrate = playing === null || playing === void 0 ? void 0 : playing.bitrate) !== null && _playing$bitrate !== void 0 ? _playing$bitrate : 0,
+				playingHeight: (_playing$height2 = playing === null || playing === void 0 ? void 0 : playing.height) !== null && _playing$height2 !== void 0 ? _playing$height2 : 0
+			});
+			if (samples.length > MAX_SAMPLES) samples.splice(0, samples.length - MAX_SAMPLES);
+		},
+		get samples() {
+			return samples;
+		},
+		get marks() {
+			return marks;
+		},
+		get history() {
+			return history;
+		},
+		get counters() {
+			const current = stallStart === null ? 0 : (performance.now() - stallStart) / 1e3;
+			return {
+				stalls,
+				stalledSeconds: stalledTotal + current,
+				switches,
+				decoded,
+				dropped
+			};
+		}
+	};
+}
+//#endregion
+export { createSampler };

package/dist/es2015/style.js

@@ -0,0 +1,135 @@
+//#region src/style.ts
+/**
+* The element's stylesheet. The button is drawn the way the player's own
+* buttons are, in a copy: the player's styles are internal, and a control
+* of the page's own carries its own sheet. Tokens come through the
+* `--mbx-*` custom properties the player sets, which inherit through light
+* DOM; the chart colours have defaults here and a page overrides them the
+* same way. Nothing carries `!important`, so a page's `::part()` rule wins.
+*/
+const STYLE = `
+:host {
+  display: inline-flex;
+  position: relative;
+  --mbx-chart-1: #5aa9e0;
+  --mbx-chart-2: #6fbf8f;
+  --mbx-chart-3: #d9a83f;
+  --mbx-chart-4: #e05a6e;
+  --mbx-chart-5: #a98fe0;
+}
+:host([hidden]) { display: none; }
+:host([inline]) { display: block; }
+[part~="button"] {
+  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~="button"]:hover { opacity: 1; }
+[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
+:host([inline]) [part~="button"] { display: none; }
+[part~="panel"] {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  box-sizing: border-box;
+  width: 560px;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--mbx-text, #f2f3f5);
+  background: rgba(16, 17, 20, 0.95);
+  border-radius: var(--mbx-radius, 4px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  font: 400 12px/1.5 var(--mbx-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  text-align: left;
+  white-space: normal;
+}
+[part~="panel"][hidden] { display: none; }
+:host([inline]) [part~="panel"] {
+  position: static;
+  width: auto;
+  max-height: none;
+  margin: 0;
+  box-shadow: none;
+  border-radius: 0;
+}
+[part~="head"] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+[part~="tab"], [part~="chart-tab"] {
+  font: inherit;
+  color: var(--mbx-muted, #9aa0a6);
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius, 4px);
+  padding: 3px 8px;
+  cursor: pointer;
+}
+[part~="tab"][aria-selected="true"], [part~="chart-tab"][aria-selected="true"] {
+  color: var(--mbx-text, #f2f3f5);
+  background: rgba(255, 255, 255, 0.12);
+}
+[part~="copy"], [part~="close"], [part~="window"] {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: var(--mbx-radius, 4px);
+  padding: 2px 8px;
+  cursor: pointer;
+}
+[part~="copy"] { margin-left: auto; }
+[part~="window"] { margin-left: auto; }
+[part~="window"] option { color: #000; }
+[part~="tab"]:focus-visible, [part~="chart-tab"]:focus-visible, [part~="copy"]:focus-visible,
+[part~="close"]:focus-visible, [part~="window"]:focus-visible {
+  outline: 2px solid var(--mbx-accent, #5b8cff);
+  outline-offset: -2px;
+}
+[part~="body"] { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px; }
+[part~="page"][hidden] { display: none; }
+[part~="rows"] { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; }
+[part~="key"] { color: var(--mbx-muted, #9aa0a6); white-space: nowrap; }
+[part~="value"] { margin: 0; overflow-wrap: anywhere; }
+[part~="heading"] {
+  margin: 10px 0 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--mbx-muted, #9aa0a6);
+}
+[part~="heading"]:first-child { margin-top: 0; }
+[part~="note"] { margin: 0; color: var(--mbx-muted, #9aa0a6); }
+[part~="chart-tabs"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
+[part~="chart"] { display: block; width: 100%; height: 160px; }
+[part~="legend"] { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; color: var(--mbx-muted, #9aa0a6); }
+[part~="swatch"] { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: middle; }
+[part~="readout"] { margin-top: 4px; }
+[part~="table"] { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
+[part~="cell"] { padding: 2px 6px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; font-weight: 400; }
+[part~="label"] { color: var(--mbx-muted, #9aa0a6); }
+[part~="ok"] { color: var(--mbx-chart-2); }
+[part~="bad"] { color: var(--mbx-chart-4); }
+[part~="na"] { color: var(--mbx-muted, #9aa0a6); }
+[part~="ok"], [part~="bad"], [part~="na"], [part~="maybe"] { font-weight: 600; }
+`;
+//#endregion
+export { STYLE };