lintje 0.3.0 → 0.5.0

package/dist-elements/tag/token-value.js

@@ -0,0 +1,75 @@
+import { Jt as e, Yt as t, Zt as n, nn as r } from "../chunks/base-CVKIPSLx.js";
+//#region src/components/content/token-value/token-value.css?inline
+var i = "/*\n * The probe is `visibility: hidden`, not `display: none`, so its computed style is read from a\n * laid-out box. The swatch's edge is heavy, so a white or a pale tint still shows its square.\n */\n:host {\n  display: inline;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-token-value {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  max-width: 100%;\n  vertical-align: bottom;\n}\n/* Under reduced motion the reset gives every element a short transition: a probe that\n   transitions reads the value it had. */\n.lintje-token-value__probe {\n  position: absolute;\n  transition-property: none;\n  width: 0;\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  pointer-events: none;\n}\n.lintje-token-value__swatch {\n  flex: 0 0 auto;\n  width: var(--space-4);\n  height: var(--space-4);\n  box-sizing: border-box;\n  border: 1px solid var(--color-border-heavy);\n}\n.lintje-token-value__swatch[hidden] { display: none; }\n.lintje-token-value__value {\n  min-width: 0;\n  font-family: var(--font-mono);\n  font-variant-numeric: normal;\n  overflow-wrap: anywhere;\n}\n", a = "—", o = new Intl.NumberFormat("nl", { maximumFractionDigits: 2 }), s = /^rgba?\(([^)]*)\)$/i, c = /^color\(\s*srgb\s+([^)]*)\)$/i, l = (e) => `#${e.map((e) => Math.max(0, Math.min(255, Math.round(e))).toString(16).padStart(2, "0").toUpperCase()).join("")}`;
+function u(e) {
+	let t = e.trim(), n = s.exec(t), r = n ? null : c.exec(t), i = (n ?? r)?.[1].split(/[\s,/]+/).filter(Boolean).map(Number.parseFloat);
+	if (!i || i.length < 3 || i.length > 4 || i.some(Number.isNaN)) return null;
+	let a = i.slice(0, 3).map((e) => r ? e * 255 : e), o = i[3] ?? 1;
+	return o < 1 ? `${l(a)} · ${Math.round(o * 100)} %` : l(a);
+}
+var d = (e) => `${o.format(Number.parseFloat(String(e)))} px`, f = class extends e {
+	constructor(...e) {
+		super(...e), this.noSwatch = !1;
+	}
+	static {
+		this.styles = n(i);
+	}
+	static {
+		this.properties = {
+			name: {
+				type: String,
+				reflect: !0
+			},
+			noSwatch: {
+				type: Boolean,
+				attribute: "no-swatch"
+			}
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), typeof MutationObserver < "u" && (this.observer ??= new MutationObserver(() => this.reread()), this.observer.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["data-theme"]
+		}));
+	}
+	disconnectedCallback() {
+		this.observer?.disconnect(), super.disconnectedCallback();
+	}
+	updated() {
+		this.reread();
+	}
+	reread() {
+		let e = this.shadowRoot?.querySelector(".lintje-token-value__value"), t = this.shadowRoot?.querySelector(".lintje-token-value__swatch"), n = this.shadowRoot?.querySelector(".lintje-token-value__probe");
+		if (!e || !t || !n) return;
+		let r = this.name && typeof getComputedStyle == "function" ? getComputedStyle(this).getPropertyValue(this.name).trim() : "", i = r ? this.colourOf(r, n) : null;
+		t.hidden = !i || this.noSwatch, t.style.background = i ? `var(${this.name})` : "", e.textContent = r ? i ?? this.describe(r, n) : "—";
+	}
+	colourOf(e, t) {
+		return t.style.color = "", t.style.color = e, t.style.color ? (t.style.color = `color-mix(in srgb, ${e} 100%, transparent)`, t.style.color || (t.style.color = e), u(getComputedStyle(t).color) ?? e) : null;
+	}
+	describe(e, t) {
+		if (t.style.font = "", t.style.font = e, t.style.font) {
+			let { fontWeight: e, fontSize: n, lineHeight: r } = getComputedStyle(t);
+			if (n.endsWith("px")) {
+				let t = Number.parseFloat(n), i = Number.parseFloat(r) * (r.endsWith("px") ? 1 : t), a = `${e} · ${d(t)}`;
+				return Number.isFinite(i) ? `${a} / ${d(i)}` : a;
+			}
+		}
+		if (/rem|em|calc\(/.test(e) && !e.includes("%")) {
+			t.style.width = "", t.style.width = e;
+			let n = t.style.width ? getComputedStyle(t).width : "";
+			if (n.endsWith("px")) return `${e} · ${d(n)}`;
+		}
+		return e;
+	}
+	render() {
+		return r`<span class="lintje-token-value">
+      <span class="lintje-token-value__probe" aria-hidden="true"></span>
+      <span class="lintje-token-value__swatch" aria-hidden="true" hidden></span>
+      <span class="lintje-token-value__value"></span>
+    </span>`;
+	}
+};
+t("lintje-token-value", f);
+//#endregion
+export { f as LintjeTokenValue, a as NO_VALUE, u as formatColour };

package/dist-elements/tag/tooltip.d.ts

@@ -1 +1 @@
-export * from '../types/primitives/tooltip/tooltip.js'
+export * from '../types/components/overlays/tooltip/tooltip.js'

package/dist-elements/tag/tooltip.js

@@ -1 +1 @@
-export { R as LintjeTooltip, z as TOOLTIP_DELAY, B as TOOLTIP_LINGER } from "../chunks/base-CbmWxUig.js";
+export { R as LintjeTooltip, z as TOOLTIP_DELAY, B as TOOLTIP_LINGER } from "../chunks/base-CVKIPSLx.js";

package/dist-elements/tag/transcript.js

@@ -1,4 +1,4 @@
-import { Jt as e, Q as t, Yt as n, Z as r, Zt as i, at as a, bt as o, en as s, lt as c, nn as l, ot as u, st as d, ut as f, y as p } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Q as t, Yt as n, Z as r, Zt as i, at as a, bt as o, en as s, lt as c, nn as l, ot as u, st as d, ut as f, y as p } from "../chunks/base-CVKIPSLx.js";
 import "./menu-button.js";
 import "./highlight.js";
 import "./textarea.js";

package/dist-elements/tag/translator.js

@@ -1,4 +1,4 @@
-import { Gt as e, Jt as t, Kt as n, Yt as r, Zt as i, en as a, nn as o } from "../chunks/base-CbmWxUig.js";
+import { Gt as e, Jt as t, Kt as n, Yt as r, Zt as i, en as a, nn as o } from "../chunks/base-CVKIPSLx.js";
 import "./textarea.js";
 //#region src/components/content/translator/translator.css?inline
 var s = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The halves stretch to one height: the taller text sets both. The plain field has no edge of\n   its own, so the surface's is the field's (3:1). */\n.lintje-translator {\n  display: flex;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n}\n.lintje-translator__half {\n  flex: 1 1 0;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  font: var(--text-translation);\n  color: var(--color-text-primary);\n}\n/* Inset, not subtle: the fields and buttons on it are the surface, so in dark it steps down. */\n.lintje-translator__half--target {\n  position: relative;\n  background: var(--color-bg-inset);\n  border-left: 1px solid var(--color-border-default);\n}\n\n.lintje-translator__bar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: calc(var(--h-control) + 2 * var(--space-4));\n  box-sizing: border-box;\n  padding: var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n  font: var(--text-ui);\n}\n/* A language choice keeps a readable width; on a phone it takes the row. What else stands in the\n   bar keeps its own width. */\n.lintje-translator__bar ::slotted(lintje-combobox) { flex: 0 1 var(--w-translator-language); min-width: 0; }\n/* The languages flank the swap, which stands half in each bar: the source at the line, the\n   target after it, so the pair reads as one \"from ⇄ to\". */\n.lintje-translator__bar--source { justify-content: flex-end; padding-right: var(--space-10); }\n.lintje-translator__half--target .lintje-translator__bar { padding-left: var(--space-10); }\n\n.lintje-translator__body {\n  position: relative;\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  padding: var(--space-4);\n}\n.lintje-translator__body--source { padding-right: calc(var(--space-4) + var(--h-icon-button)); }\n/* The source body is the field: the text fills it, and the ring goes round it, inside the edge. */\n.lintje-translator__text { flex: 1; }\n.lintje-translator__body--source:has(.lintje-translator__text:focus-within) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n.lintje-translator__clear { position: absolute; top: var(--space-2); right: var(--space-2); }\n\n.lintje-translator__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1) var(--space-2);\n  min-height: var(--h-touch);\n  /* As far from the sides and the bottom as the language choices stand from the top. */\n  padding: var(--space-1) var(--space-4) var(--space-4);\n  font: var(--text-ui);\n}\n.lintje-translator__actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }\n/* The AI label belongs to the text it marks: right under it, so the foot holds only actions and\n   stands level with the source's at every width. A hidden label leaves no gap. */\n.lintje-translator__body ::slotted([slot='target-note']) { align-self: flex-start; margin-top: var(--space-4); }\n/* The counter stands on the source's foot line, right, level with its tools; the text keeps\n   the body. */\n.lintje-translator__text::part(counter) {\n  position: absolute;\n  top: calc(100% + var(--space-1) + var(--h-icon-button) / 2);\n  right: var(--space-4);\n  transform: translateY(-50%);\n}\n\n/* Documents: the languages in one row, the content under them at full width. */\n.lintje-translator--documents { flex-direction: column; }\n.lintje-translator__bars { display: flex; }\n.lintje-translator__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  padding: var(--space-6);\n  font: var(--text-ui);\n}\n\n/* On the line between the halves, level with the language choices. */\n.lintje-translator__swap {\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--space-4) + (var(--h-control) - var(--h-icon-button)) / 2);\n  left: 0;\n  transform: translateX(-50%);\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-translator, .lintje-translator__bars { flex-direction: column; }\n  .lintje-translator__content { padding: var(--space-4); }\n  .lintje-translator__half--target { border-left: 0; border-top: 1px solid var(--color-border-default); }\n  .lintje-translator__bar ::slotted(lintje-combobox) { flex: 1 1 100%; }\n  .lintje-translator__bar--source { padding-right: var(--space-4); }\n  .lintje-translator__swap { top: 0; left: 50%; transform: translate(-50%, -50%); }\n  .lintje-translator__half--target .lintje-translator__bar {\n    padding-top: calc(var(--space-2) + var(--h-icon-button) / 2);\n    padding-left: var(--space-4);\n  }\n}\n";

package/dist-elements/tag/tree-view.js

@@ -1,4 +1,4 @@
-import { Jt as e, Yt as t, Zt as n, bt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Yt as t, Zt as n, bt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-CVKIPSLx.js";
 //#region src/components/tables/tree-view/tree-view.css?inline
 var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-tree,\n.lintje-tree__group { list-style: none; margin: 0; padding: 0; }\n.lintje-tree { font: var(--text-ui); color: var(--color-text-primary); }\n\n/* The treeitem holds its row and its children, so the ring is drawn inside the row alone. */\n.lintje-tree__item:focus-visible { outline: none; }\n.lintje-tree__item:focus-visible > .lintje-tree__row {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n\n.lintje-tree__row {\n  display: flex; align-items: center;\n  gap: var(--space-1);\n  height: var(--h-option);\n  padding: 0 var(--space-2) 0 calc(var(--space-2) + var(--lintje-tree-depth, 0) * var(--space-5));\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-tree__row:hover { background: var(--color-bg-subtle); }\n.lintje-tree__row.is-selected {\n  background: var(--color-bg-selected);\n  box-shadow: inset 4px 0 0 var(--color-accent-line);\n  font-weight: 700;\n}\n\n.lintje-tree__arrow {\n  flex: none;\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 16px; height: 16px;\n  color: var(--color-text-muted);\n}\n/* The fold target reaches 24 × 24 px with a transparent hit area; it stays inside the gap. */\n.lintje-tree__arrow--toggle { position: relative; }\n.lintje-tree__arrow--toggle::after {\n  content: '';\n  position: absolute;\n  inset: calc(var(--space-1) * -1);\n}\n.lintje-tree__label {\n  min-width: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.lintje-tree__count { flex: none; font-weight: 400; color: var(--color-text-muted); }\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-tree__row { transition: none; }\n}\n\n/* Forced colours: the fill and inset bar are dropped. The bar becomes a real border (Canvas at\n   rest, Highlight when selected), so selecting moves nothing. */\n@media (forced-colors: active) {\n  .lintje-tree__row { border-left: 4px solid Canvas; }\n  .lintje-tree__row.is-selected { border-left-color: Highlight; }\n}\n";
 //#endregion

package/dist-elements/tag/user-menu.js

@@ -1,4 +1,4 @@
-import { H as e, Jt as t, Yt as n, Zt as r, en as i, et as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CbmWxUig.js";
+import { H as e, Jt as t, Yt as n, Zt as r, en as i, et as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CVKIPSLx.js";
 import { n as u, nextRow as d, renderMenuEntries as f, t as p } from "./menu-button.js";
 //#region src/components/frame/user-menu/user-menu.css?inline
 var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigation bar; the menu is a fixed popover\n * and takes no space. `inline`, it is a block at the bottom of the mobile navigation.\n * `menu-button.css` is adopted beside this file: the rows are its `.lintje-menu__row`.\n */\n:host { display: inline-flex; flex: none; vertical-align: middle; }\n:host([inline]) { display: block; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The avatar and the chevron that says it opens a menu; at least `--h-touch` high. */\n.lintje-user-menu__trigger {\n  display: flex; align-items: center; justify-content: center;\n  gap: var(--space-2);\n  min-width: var(--h-touch); height: var(--lintje-tool-height, var(--h-touch));\n  padding: 0 var(--space-3);\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-user-menu__trigger:hover,\n.lintje-user-menu__trigger.is-open { background: var(--color-nav-hover); }\n\n.lintje-user-menu__avatar {\n  display: flex; align-items: center; justify-content: center;\n  flex: none;\n  width: 2rem; height: 2rem;\n  border-radius: var(--radius-round);\n  background: var(--color-nav-avatar-bg);\n  color: var(--color-nav-avatar-text);\n  font-size: 0.875rem; font-weight: 700;\n}\n\n.lintje-user-menu__panel {\n  width: 17.5rem;\n  max-width: 100%;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n.lintje-user-menu__who {\n  display: flex; align-items: center; gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-user-menu__names { min-width: 0; }\n.lintje-user-menu__name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }\n.lintje-user-menu__role { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }\n\n.lintje-user-menu__group { display: flex; flex-direction: column; padding: var(--space-1) 0; }\n.lintje-user-menu__group--logout { border-top: 1px solid var(--color-border-default); }\n.lintje-user-menu__group:first-child.lintje-user-menu__group--logout { border-top: 0; }\n.lintje-user-menu__logout { display: flex; flex-direction: column; margin: 0; }\n.lintje-user-menu__logout-row { font-weight: 700; }\n\n.lintje-user-menu__version {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border-top: 1px solid var(--color-border-default);\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n}\n\n.lintje-user-menu__panel.is-inline { width: 100%; color: var(--color-nav-text); }\n.lintje-user-menu__panel.is-inline .lintje-user-menu__who,\n.lintje-user-menu__panel.is-inline .lintje-user-menu__group--logout,\n.lintje-user-menu__panel.is-inline .lintje-user-menu__version { border-color: var(--color-nav-line); }\n.lintje-user-menu__panel.is-inline .lintje-user-menu__who { padding: var(--space-4) var(--space-5); }\n/* Small text on the theme fill takes the menu's own ink: the sub tint is 3.82:1 on #01689B. */\n.lintje-user-menu__panel.is-inline .lintje-user-menu__role,\n.lintje-user-menu__panel.is-inline .lintje-user-menu__version,\n.lintje-user-menu__panel.is-inline .lintje-menu__hint { color: var(--color-nav-text); }\n.lintje-user-menu__panel.is-inline .lintje-user-menu__version { padding: var(--space-2) var(--space-5); }\n.lintje-user-menu__panel.is-inline .lintje-menu__row {\n  height: var(--h-touch);\n  padding: 0 var(--space-5);\n  color: var(--color-nav-text);\n}\n.lintje-user-menu__panel.is-inline .lintje-menu__row:hover { background: var(--color-nav-hover); }\n.lintje-user-menu__panel.is-inline .lintje-menu__row.is-disabled,\n.lintje-user-menu__panel.is-inline .lintje-menu__row.is-disabled .lintje-menu__hint { color: var(--color-nav-disabled); }\n.lintje-user-menu__panel.is-inline .lintje-menu__separator { background: var(--color-nav-line); }\n\n/* On the theme fill the orange ring disappears: the on-theme ring, as the side menu. */\n.lintje-user-menu__trigger:focus-visible,\n.lintje-user-menu__panel.is-inline :focus-visible { outline-color: var(--color-focus-on-theme); }\n\n/* Forced colours: the open button keeps a Highlight edge, the avatar a CanvasText ring. */\n@media (forced-colors: active) {\n  .lintje-user-menu__trigger:focus-visible,\n  .lintje-user-menu__panel.is-inline :focus-visible { outline-color: Highlight; }\n  .lintje-user-menu__trigger.is-open:not(:focus-visible) { outline: 1px solid Highlight; outline-offset: -1px; }\n  .lintje-user-menu__avatar { border: 1px solid CanvasText; }\n}\n", h = 0, g = class extends t {

package/dist-elements/tag/video-player.js

@@ -1,7 +1,7 @@
-import { L as e, Yt as t, Zt as n, en as r, lt as i, nn as a, rt as o, st as s, ut as c } from "../chunks/base-CbmWxUig.js";
+import { L as e, Yt as t, Zt as n, en as r, lt as i, nn as a, rt as o, st as s, ut as c } from "../chunks/base-CVKIPSLx.js";
 import "./menu-button.js";
 import { n as l, o as u, p as d } from "../chunks/playback-DZJ_NMXv.js";
-import { n as f, t as p } from "../chunks/player-B8QXJ0Z5.js";
+import { n as f, t as p } from "../chunks/player-DDDWUevR.js";
 //#region src/components/content/video-player/video-player.css?inline
 var m = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-video-player {\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n\n/* No surface token stays black in dark, so the surface takes the ink on a light fill. */\n.lintje-video-player__stage {\n  position: relative;\n  aspect-ratio: 16 / 9;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--color-text-on-light-fill);\n  overflow: hidden;\n}\n.lintje-video-player__video {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  background: var(--color-text-on-light-fill);\n}\n\n/* What stands on the picture has a white edge, so the fill keeps apart from the dark. */\n.lintje-video-player__big-play.lintje-button,\n.lintje-video-player__retry.lintje-button {\n  position: relative;\n  border: 2px solid var(--color-text-on-fill);\n}\n.lintje-video-player__big-play.lintje-button { width: 64px; height: 64px; padding: 0; }\n.lintje-video-player__big-play.lintje-button.is-disabled {\n  border-color: var(--color-text-on-fill);\n}\n\n/* A failed load says so where the picture would be: the announcement's light fill would float. */\n.lintje-video-player__failed {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-3);\n  padding: 0 var(--space-6);\n  text-align: center;\n  color: var(--color-text-on-fill);\n}\n.lintje-video-player__failed-mark {\n  width: var(--space-6);\n  height: var(--space-6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--color-error);\n  color: var(--color-text-inverse);\n}\n.lintje-video-player__failed-text { margin: 0; font: var(--text-ui); font-weight: 700; }\n\n.lintje-video-player__caption {\n  position: absolute;\n  left: var(--space-4);\n  right: var(--space-4);\n  bottom: var(--space-4);\n  text-align: center;\n  pointer-events: none;\n}\n.lintje-video-player__caption-text {\n  padding: 2px var(--space-2);\n  background: var(--color-text-on-light-fill);\n  color: var(--color-text-on-fill);\n  font: var(--text-body);\n  box-decoration-break: clone;\n  -webkit-box-decoration-break: clone;\n}\n\n/* Two lines at every width: the time beside the bar keeps the buttons on one line in a tile. */\n.lintje-video-player__controls {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-3) var(--space-2);\n}\n.lintje-video-player__timeline { display: flex; align-items: center; gap: var(--space-3); }\n.lintje-video-player__buttons { display: flex; align-items: center; gap: var(--space-1); }\n.lintje-video-player__speed {\n  flex: none;\n  padding: 0 var(--space-1);\n  background: var(--color-term-bg);\n  color: var(--color-accent-text);\n  font: var(--text-small);\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n}\n/* The menu's trigger takes the 48 px of the player's other buttons. */\n.lintje-video-player__more { margin-left: auto; --h-icon-button: var(--h-touch); }\n\n.lintje-video-player:fullscreen { display: flex; flex-direction: column; border: 0; }\n.lintje-video-player:fullscreen .lintje-video-player__stage {\n  flex: 1 1 auto;\n  min-height: 0;\n  aspect-ratio: auto;\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-video-player { border-left: 0; border-right: 0; }\n}\n\n/* Forced colours drop the fills: the speed and the mark keep an outline. */\n@media (forced-colors: active) {\n  .lintje-video-player__speed,\n  .lintje-video-player__failed-mark { outline: 1px solid CanvasText; }\n}\n", h = "ondertiteling", g = "audiodescriptie";
 function _(e, t) {

package/dist-elements/tokens.css

@@ -425,6 +425,8 @@
      CSS ships unminified so the notes reach it. */
   --ease-in-motion: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
   --ease-out-motion: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
+  /* A fade that runs both ways: straight, so out is in played backwards; a curve leaves a ghost. */
+  --ease-fade: linear; /* @kind other */
   --dur-base: 200ms; /* @kind other */
   --dur-hover: 120ms; /* @kind other */
   --dur-popover: var(--dur-base); /* @kind other */