@mattebox/player 0.1.0 → 0.3.0

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,13 @@
 /**
- * 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.
+ *
+ * The box is black and the picture is centred in it, letterboxed or
+ * pillarboxed by `object-fit: contain`, whatever height or ratio the page
+ * gives the element: what fullscreen always did, now the default. With no
+ * height from the page the stage is as tall as the picture and none of it
+ * shows.
  *
  * 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 +17,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  background: #000;\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/* The stage is a column as tall as the host, so the picture is centred\n   in whatever height the page gives, and the panels row under native\n   controls keeps its place below the picture. The height comes from the\n   page, or from the browser in fullscreen, and not from a display on the\n   host: a page's own \"mattebox-player { display: block }\" beats a :host()\n   rule, so nothing here may depend on one. */\n[part~=\"stage\"] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n}\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. Capped at the stage, and contained, so a box shorter\n   than the picture letterboxes it and a narrower one pillarboxes it. */\n::slotted(video) {\n  display: block;\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  object-fit: contain;\n  aspect-ratio: auto 16 / 9;\n}\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 browser gives the host the whole screen with\n   !important; the picture takes what the panels row leaves. The error\n   surface, which sits under the stage in the page, goes over its foot\n   instead. */\n:host(:fullscreen) ::slotted(video) { flex: 1; }\n:host(:fullscreen) [part~=\"error\"] { position: absolute; left: 0; right: 0; bottom: 0; }\n:host(:-webkit-full-screen) ::slotted(video) { flex: 1; }\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;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,KAAK,8iFAwEjB,CAAC"}

package/dist/style.js

@@ -1,5 +1,13 @@
 /**
- * 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.
+ *
+ * The box is black and the picture is centred in it, letterboxed or
+ * pillarboxed by `object-fit: contain`, whatever height or ratio the page
+ * gives the element: what fullscreen always did, now the default. With no
+ * height from the page the stage is as tall as the picture and none of it
+ * shows.
  *
  * Nothing carries `!important`. For normal declarations the outer tree wins
  * over the shadow tree, so any `::part()` rule the page writes beats these
@@ -14,6 +22,7 @@ export const STYLE = `
   display: block;
   position: relative;
   outline: none;
+  background: #000;
   --mbx-surface: #101114;
   --mbx-text: #f2f3f5;
   --mbx-muted: #9aa0a6;
@@ -25,312 +34,53 @@ export const STYLE = `
   --mbx-pad: 8px;
   --mbx-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }
-[part~="stage"] { position: relative; }
-/* 16:9 until the media says otherwise: a bare video measures 300 by 150 and
-   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"] {
+/* The stage is a column as tall as the host, so the picture is centred
+   in whatever height the page gives, and the panels row under native
+   controls keeps its place below the picture. The height comes from the
+   page, or from the browser in fullscreen, 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. */
+[part~="stage"] {
   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;
+  justify-content: center;
+  height: 100%;
 }
-[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"] {
+/* 16:9 until the media says otherwise: a bare video measures 300 by 150 and
+   would jump to its size on metadata. Auto first, so the natural ratio wins
+   once it is known. Capped at the stage, and contained, so a box shorter
+   than the picture letterboxes it and a narrower one pillarboxes it. */
+::slotted(video) {
   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;
+  min-height: 0;
+  max-height: 100%;
+  object-fit: contain;
+  aspect-ratio: auto 16 / 9;
 }
 :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 browser gives the host the whole screen with
+   !important; the picture takes what the panels row leaves. The error
+   surface, which sits under the stage in the page, goes over its foot
+   instead. */
+:host(:fullscreen) ::slotted(video) { flex: 1; }
+:host(:fullscreen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
+:host(:-webkit-full-screen) ::slotted(video) { flex: 1; }
+: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 +88,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;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEpB,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"}

package/dist/tags.d.ts

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

package/dist/tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../src/tags.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,eAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,MAAM,eAAe,CAAC;AACnC,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,aAAa,sBAAsB,CAAC;AACjD,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,iBAAiB,0BAA0B,CAAC;AACzD,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,QAAQ,iBAAiB,CAAC;AACvC,eAAO,MAAM,cAAc,uBAAuB,CAAC;AACnD,eAAO,MAAM,QAAQ,iBAAiB,CAAC;AACvC,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,cAAc,uBAAuB,CAAC;AACnD,eAAO,MAAM,SAAS,kBAAkB,CAAC;AACzC,eAAO,MAAM,MAAM,eAAe,CAAC;AACnC,eAAO,MAAM,MAAM,eAAe,CAAC;AACnC,eAAO,MAAM,aAAa,sBAAsB,CAAC"}

package/dist/tags.js

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

package/dist/tags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags.js","sourceRoot":"","sources":["../src/tags.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,MAAM,CAAC,MAAM,MAAM,GAAG,iBAAiB,CAAC;AACxC,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC;AACnC,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,aAAa,GAAG,mBAAmB,CAAC;AACjD,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;AACzD,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,QAAQ,GAAG,cAAc,CAAC;AACvC,MAAM,CAAC,MAAM,cAAc,GAAG,oBAAoB,CAAC;AACnD,MAAM,CAAC,MAAM,QAAQ,GAAG,cAAc,CAAC;AACvC,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC3C,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC3C,MAAM,CAAC,MAAM,cAAc,GAAG,oBAAoB,CAAC;AACnD,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;AACzC,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC;AACnC,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC;AACnC,MAAM,CAAC,MAAM,aAAa,GAAG,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattebox/player",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A <mattebox-player> custom element over @mattebox/player-core.",
   "author": "Josep Boix Requesens",
   "repository": {
@@ -34,8 +34,28 @@
       "modern": "./dist/index.js",
       "default": "./dist/es2015/index.js"
     },
+    "./element": {
+      "types": "./dist/element-entry.d.ts",
+      "modern": "./dist/element-entry.js",
+      "default": "./dist/es2015/element-entry.js"
+    },
+    "./elements/*": {
+      "types": "./dist/entries/*.d.ts",
+      "modern": "./dist/entries/*.js",
+      "default": "./dist/es2015/entries/*.js"
+    },
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "element": [
+        "./dist/element-entry.d.ts"
+      ],
+      "elements/*": [
+        "./dist/entries/*.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
     "NOTICE"
@@ -53,6 +73,6 @@
     "@mattebox/player-core": "^0.1.0"
   },
   "peerDependencies": {
-    "mattebox": "^0.2.1"
+    "mattebox": "^0.3.0"
   }
 }