lintje 0.1.1

package/dist-elements/chunks/focus-trap-w3vCamJ6.js

@@ -0,0 +1,73 @@
+import { H as e } from "./base-rBLTcEIv.js";
+//#region src/components/shared/focus-trap.ts
+var t = [
+	"a[href]",
+	"area[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"iframe",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]"
+].join(",");
+function n(e, t) {
+	let n = Array.from(e.querySelectorAll("slot"), (e) => e.assignedElements({ flatten: !0 })).flat();
+	for (; t;) {
+		if (t === e || n.includes(t)) return !0;
+		t = t.parentNode ?? (t instanceof ShadowRoot ? t.host : null);
+	}
+	return !1;
+}
+function r(e) {
+	return !e.matches(t) || e.tabIndex < 0 ? !1 : typeof e.checkVisibility != "function" || e.checkVisibility({ visibilityProperty: !0 });
+}
+function i(e) {
+	let t = [], n = (e) => {
+		if (e.hasAttribute("inert") || e.hasAttribute("hidden")) return;
+		e instanceof HTMLElement && r(e) && t.push(e);
+		let i = e instanceof HTMLSlotElement ? e.assignedElements({ flatten: !0 }) : Array.from((e.shadowRoot ?? e).children);
+		for (let e of i) n(e);
+	};
+	for (let t of Array.from(e.children)) n(t);
+	return t;
+}
+function a(e) {
+	return r(e) ? e : i(e.shadowRoot ?? e)[0] ?? e;
+}
+var o = [], s = class {
+	#e = null;
+	#t = null;
+	isTopmost() {
+		return this.#e !== null && o[o.length - 1] === this;
+	}
+	#n = (t) => {
+		let n = this.#e;
+		if (t.key !== "Tab" || !n?.isConnected || !this.isTopmost()) return;
+		let r = i(n);
+		if (r.length === 0) {
+			t.preventDefault(), n.focus();
+			return;
+		}
+		let a = r.indexOf(e()), o = r[0], s = r[r.length - 1];
+		t.shiftKey && a <= 0 ? (t.preventDefault(), s.focus()) : !t.shiftKey && (a === -1 || a === r.length - 1) && (t.preventDefault(), o.focus());
+	};
+	#r = () => {
+		let t = this.#e;
+		t?.isConnected && this.isTopmost() && (n(t, e()) || t.focus());
+	};
+	activate(t, { focus: n = !0 } = {}) {
+		let r = this.#e ? this.#t : e();
+		this.#e && this.deactivate(!1), this.#t = r, this.#e = t, o.push(this), document.addEventListener("keydown", this.#n), document.addEventListener("focusin", this.#r), n instanceof HTMLElement ? a(n).focus() : n && t.focus();
+	}
+	deactivate(e = !0) {
+		if (!this.#e) return;
+		document.removeEventListener("keydown", this.#n), document.removeEventListener("focusin", this.#r);
+		let t = o.indexOf(this);
+		t !== -1 && o.splice(t, 1), this.#e = null;
+		let n = this.#t;
+		this.#t = null, e && n?.isConnected && n.focus();
+	}
+};
+//#endregion
+export { a as n, i as r, s as t };

package/dist-elements/chunks/input-jQVTln7H.js

@@ -0,0 +1,195 @@
+import { Gt as e, Kt as t, O as n, Z as r, et as i } from "./base-rBLTcEIv.js";
+import { d as a, s as o, u as s } from "./controls-B1455oPG.js";
+//#region src/components/inputs/shared/field-foot.ts
+function c(t, n, r) {
+	return n ? r.errorId : t ? r.hintId : e;
+}
+function l(n, r, a, o = !0) {
+	return r ? t`<span id=${a.errorId} class="lintje-field__error" role=${o ? "alert" : e}
+      >${i("functioneel-waarschuwing", { size: 14 })}${r}</span
+    >` : n ? t`<span id=${a.hintId} class="lintje-field__hint">${n}</span>` : e;
+}
+//#endregion
+//#region src/components/inputs/shared/input.ts
+var u = "(niet verplicht)", d = "afwijkend van standaard", f = class extends n {
+	static {
+		this.properties = {
+			name: { type: String },
+			label: { type: String },
+			hideLabel: {
+				type: Boolean,
+				attribute: "hide-label"
+			},
+			hint: { type: String },
+			error: { type: String },
+			disabled: {
+				type: Boolean,
+				reflect: !0
+			},
+			modified: {
+				type: Boolean,
+				reflect: !0
+			},
+			required: {
+				type: Boolean,
+				reflect: !0
+			},
+			optional: { type: Boolean },
+			layout: {
+				type: String,
+				reflect: !0
+			},
+			resetLabel: {
+				type: String,
+				attribute: "reset-label"
+			}
+		};
+	}
+	static {
+		this.formAssociated = !0;
+	}
+	#e;
+	#t;
+	constructor() {
+		super(), this.name = "", this.label = "", this.hideLabel = !1, this.disabled = !1, this.modified = !1, this.required = !1, this.optional = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : null, this.#t = !1, this.addController({ hostUpdated: () => this.syncForm() });
+	}
+	get postedValue() {
+		return s(this);
+	}
+	syncForm() {
+		if (this.#t || (this.#t = !0, this.#e = structuredClone(s(this))), !this.internals) return;
+		let e = new FormData();
+		if (this.name && !this.disabled) for (let [t, n] of o(this.name, this.postedValue)) e.append(t, n);
+		this.internals.setFormValue(e);
+	}
+	formResetCallback() {
+		a(this, structuredClone(this.#e));
+	}
+	formDisabledCallback(e) {
+		this.disabled = e;
+	}
+	get labelId() {
+		return "lintje-input-label";
+	}
+	get controlId() {
+		return "lintje-input-control";
+	}
+	focusControl(e) {
+		if (this.disabled) return;
+		let t = this.renderRoot;
+		(t.querySelector(`#${this.controlId}`) ?? t.querySelector("input[type=\"radio\"]:checked:not(:disabled)") ?? [...t.querySelectorAll("input, select, button, textarea")].find((e) => !e.disabled))?.focus(e);
+	}
+	focus(e) {
+		this.focusControl(e);
+	}
+	get hintId() {
+		return "lintje-input-hint";
+	}
+	get errorId() {
+		return "lintje-input-error";
+	}
+	get footMessage() {
+		return this.error ?? "";
+	}
+	get describedBy() {
+		return c(this.hint, this.footMessage, {
+			hintId: this.hintId,
+			errorId: this.errorId
+		});
+	}
+	commit(e) {
+		this.announce(e);
+	}
+	announce(e, t = e) {
+		this.disabled || (this.emitLocal("lintje-change", e), this.name && this.emit("lintje-values-change", { [this.name]: t }));
+	}
+	renderLabel(n, i = e) {
+		let a = () => this.focusControl();
+		if (this.hideLabel) {
+			let e = this.renderLabelSuffix();
+			return n ? t`<label id=${this.labelId} for=${n} class="visually-hidden">${this.label} ${e}</label>` : t`<span id=${this.labelId} class="visually-hidden" @click=${a}>${this.label} ${e}</span>`;
+		}
+		let o = r({
+			"lintje-label": !0,
+			"is-modified": this.modified
+		}), s = this.modified ? t`<span class="lintje-label__dot"><span class="visually-hidden">${d}</span></span>` : e, c = this.renderLabelSuffix();
+		return n ? t`<label id=${this.labelId} for=${n} class=${o}>${this.label} ${c} ${s} ${i}</label>` : t`<span id=${this.labelId} class=${o} @click=${a}>${this.label} ${c} ${s} ${i}</span>`;
+	}
+	renderLabelSuffix() {
+		return this.isOptional ? t`<span class="lintje-label__optional">${u}</span>` : e;
+	}
+	get isOptional() {
+		return this.optional && !this.required;
+	}
+	get labelSuffixText() {
+		return [this.isOptional ? u : "", this.modified && !this.hideLabel ? d : ""].filter(Boolean).map((e) => ` ${e}`).join("");
+	}
+	get labelText() {
+		return this.label ? `${this.label}${this.labelSuffixText}` : "";
+	}
+	renderFoot() {
+		let e = l(this.hint, this.footMessage, {
+			hintId: this.hintId,
+			errorId: this.errorId
+		});
+		return !this.modified || !this.resetLabel ? e : t`${e}<button
+        type="button"
+        class="lintje-field__reset"
+        ?disabled=${this.disabled}
+        @click=${() => {
+			this.focusControl(), this.emitLocal("lintje-reset");
+		}}
+      >
+        ${this.resetLabel}
+      </button>`;
+	}
+}, p = class extends f {
+	constructor(...e) {
+		super(...e), this.readonly = !1, this.initialValue = void 0;
+	}
+	static {
+		this.properties = {
+			name: {
+				type: String,
+				reflect: !0
+			},
+			readonly: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	get nativeControl() {
+		return this.renderRoot.querySelector(`#${this.controlId}`);
+	}
+	announce(e, t = e) {
+		this.readonly || super.announce(e, t);
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.initialValue = this.value;
+	}
+	syncForm() {}
+	updated(e) {
+		super.updated(e);
+		let t = this.internals;
+		if (!t) return;
+		t.setFormValue(this.disabled ? null : this.formValue);
+		let n = this.nativeControl;
+		this.required && !this.disabled && !this.readonly && this.formValue === "" && n ? t.setValidity({ valueMissing: !0 }, n.validationMessage || "Vul dit veld in.", n) : t.setValidity({});
+	}
+	submitOnEnter(e, t) {
+		if (e.key !== "Enter" || e.isComposing || this.readonly || this.disabled) return;
+		t();
+		let n = this.internals?.form;
+		n && typeof n.requestSubmit == "function" && setTimeout(() => {
+			e.defaultPrevented || n.requestSubmit();
+		});
+	}
+	formResetCallback() {
+		this.value = this.initialValue;
+		let e = this.nativeControl;
+		e && (e.value = this.formValue), this.requestUpdate();
+	}
+}, m = "/*\n * The fields' own boxes and the `.lintje-choice` rules of the checkbox, radio and toggle.\n * `lintje-data-table` adopts this sheet too for its selectable rows' checkbox; the\n * `:host(lintje-multiselect)` blocks do not match there.\n */\n:host(lintje-multiselect) {\n  display: block;\n  min-width: 0;\n  width: 180px;\n}\n:host(lintje-range) {\n  display: block;\n  min-width: 0;\n  width: 180px;\n}\n:host(lintje-text-input),\n:host(lintje-number-input),\n:host(lintje-checkbox),\n:host(lintje-toggle),\n:host(lintje-radio-group) {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* Order matters in every field sheet: disabled wins over read-only, read-only over error, at\n   equal specificity. A disabled control cannot be in error, so its rule sets the whole border. */\n\n.lintje-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.lintje-label {\n  display: flex; align-items: baseline; gap: var(--space-2);\n  font-size: 0.875rem; font-weight: 700; color: var(--color-text-primary);\n  padding: 0;\n}\n.lintje-label.is-modified { color: var(--color-accent-text); }\n.lintje-label__dot {\n  width: 6px; height: 6px; border-radius: var(--radius-round);\n  background: var(--color-attention);\n  flex: none; align-self: center;\n}\n:host([disabled]) .lintje-label { color: var(--color-text-disabled); }\n.lintje-label__optional { font-weight: 400; color: var(--color-text-muted); }\n:host([disabled]) .lintje-label__optional { color: var(--color-text-disabled); }\n/* A value and its unit stay together when a long label wraps. */\n.lintje-field__value { font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }\n.lintje-field__hint { font: var(--text-meta); color: var(--color-text-muted); }\n.lintje-field__error {\n  display: flex; align-items: center; gap: 6px;\n  font: var(--text-meta); color: var(--color-error-text); font-weight: 700;\n}\n\n/* --- A setting's row: name and hint on the left, the control on the right ----- */\n/* A row reads its own width, not the screen's: in a drawer it stays a column. */\n:host([layout='row']) { width: 100%; container-type: inline-size; }\n@container (min-width: 35rem) {\n  :host([layout='row']) .lintje-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, calc(8 * var(--space-10)));\n    gap: var(--space-1) var(--space-8);\n    align-items: center;\n  }\n  :host([layout='row']) .lintje-field > * { grid-column: 2; }\n  /* Regular weight: the bold above it is the section's heading, the grey under it the hint. */\n  :host([layout='row']) .lintje-field > .lintje-label {\n    grid-column: 1; grid-row: 1;\n    font: var(--text-ui);\n  }\n  :host([layout='row']) .lintje-field > .lintje-field__hint,\n  :host([layout='row']) .lintje-field > .lintje-field__error { grid-column: 1; grid-row: 2; align-self: start; }\n  :host([layout='row']) .lintje-field > .lintje-field__reset { grid-column: 1; grid-row: 3; }\n  /* A switch is its own label: the row is the label, the switch stands at its right edge. */\n  :host([layout='row']) .lintje-field > .lintje-choice {\n    grid-column: 1 / -1; grid-row: 1;\n    flex-direction: row-reverse; justify-content: space-between;\n  }\n}\n\n/* Back to the default: a link, so it stays quieter than the field it belongs to. */\n.lintje-field__reset {\n  align-self: flex-start;\n  justify-self: start;\n  min-height: var(--h-target);\n  padding: 0;\n  border: 0;\n  background: none;\n  color: var(--color-link);\n  font: var(--text-meta);\n  font-weight: 700;\n  text-decoration: underline;\n  cursor: pointer;\n}\n.lintje-field__reset:hover { color: var(--color-link-hover); }\n\n/* --- Checkbox, radio, toggle ---------------------------------------------- */\n.lintje-choice {\n  display: flex; align-items: center; gap: 10px;\n  min-height: var(--h-target);\n  font-size: 1rem;\n  cursor: pointer;\n}\n.lintje-choice__input { position: absolute; opacity: 0; width: 0; height: 0; }\n.lintje-choice__label.is-modified { color: var(--color-accent-text); font-weight: 700; }\n\n.lintje-choice__box {\n  width: 24px; height: 24px; flex: none;\n  display: flex; align-items: center; justify-content: center;\n  border: 2px solid var(--color-border-choice);\n  background: var(--color-bg-surface);\n  color: var(--color-action-primary-text); font-size: 0.875rem; font-weight: 700; line-height: 1;\n  transition: background-color var(--dur-hover) var(--ease-in-motion),\n    border-color var(--dur-hover) var(--ease-in-motion);\n}\n/* The mark is always drawn and grows in when the box is checked, so checking and unchecking both move. */\n.lintje-choice__mark {\n  opacity: 0; transform: scale(0.4);\n  transition: opacity var(--dur-hover) var(--ease-in-motion),\n    transform var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-choice__input:checked ~ .lintje-choice__box .lintje-choice__mark,\n.lintje-choice__input:indeterminate ~ .lintje-choice__box .lintje-choice__mark {\n  opacity: 1; transform: none;\n}\n/* The border takes the primary-fill border: in dark the tint, so the box is no dark square. */\n.lintje-choice__input:checked ~ .lintje-choice__box,\n.lintje-choice__input:indeterminate ~ .lintje-choice__box {\n  background: var(--color-accent); border-color: var(--color-action-primary-border);\n}\n.lintje-choice__input:focus-visible ~ .lintje-choice__box,\n.lintje-choice__input:focus-visible ~ .lintje-choice__radio,\n.lintje-choice__input:focus-visible ~ .lintje-choice__switch {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n\n.lintje-choice__radio {\n  width: 24px; height: 24px; flex: none;\n  border: 2px solid var(--color-border-choice);\n  border-radius: 50%;\n  background: var(--color-bg-surface);\n  display: flex; align-items: center; justify-content: center;\n}\n/* Ring and dot take the line accent: the dot stands on the surface by itself, so the primary\n   fill would sink into the dark surface. */\n.lintje-choice__input:checked ~ .lintje-choice__radio { border-color: var(--color-accent-line); }\n.lintje-choice__input:checked ~ .lintje-choice__radio::after {\n  content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent-line);\n}\n\n/* Off: edged with the field's edge (3:1, WCAG 1.4.11) as an inset ring, keeping the box size. */\n.lintje-choice__switch {\n  box-sizing: border-box;\n  width: 40px; height: 22px; flex: none;\n  border-radius: 11px;\n  /* Off is a filled track, not a pale one with a ring: the fill alone reaches 3:1. */\n  background: var(--color-border-field);\n  display: flex; align-items: center;\n  padding: 2px;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-choice__knob {\n  width: 18px; height: 18px; display: block;\n  border-radius: 50%;\n  background: var(--color-bg-surface);\n  transition: transform var(--dur-hover) var(--ease-in-motion);\n}\n/* An inset ring, not a border: a border would eat into the knob's inset and travel. */\n.lintje-choice__input:checked ~ .lintje-choice__switch {\n  background: var(--color-accent);\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border);\n}\n.lintje-choice__input:checked ~ .lintje-choice__switch .lintje-choice__knob { transform: translateX(18px); }\n\n.lintje-choice.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-choice__input:disabled ~ .lintje-choice__box,\n.lintje-choice__input:disabled ~ .lintje-choice__radio {\n  border-color: var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n}\n.lintje-choice__input:disabled:checked ~ .lintje-choice__box {\n  background: var(--color-border-strong);\n}\n.lintje-choice__input:disabled:checked ~ .lintje-choice__radio::after {\n  background: var(--color-border-strong);\n}\n/* After the checked rule, so a disabled switch also loses its inset ring. */\n.lintje-choice__input:disabled ~ .lintje-choice__switch { background: var(--color-border-default); box-shadow: none; }\n\n/* --- Stacked in the filter sheet ----------------------------------------- */\n:host([stacked]) {\n  width: 100%;\n  --h-control: var(--h-touch);\n}\n\n/* --- Forced colours ------------------------------------------------------- */\n/* Fills and box-shadows are dropped: the dot, pill and knob keep their drawing in system\n   colours. The pill takes a 1 px border and gives up 1 px of its inset, so the knob's travel stays. */\n@media (forced-colors: active) {\n  .lintje-label__dot { forced-color-adjust: none; background: CanvasText; }\n\n  .lintje-choice__input:focus-visible ~ .lintje-choice__box,\n  .lintje-choice__input:focus-visible ~ .lintje-choice__radio,\n  .lintje-choice__input:focus-visible ~ .lintje-choice__switch { outline-color: Highlight; }\n\n  .lintje-choice__input:checked ~ .lintje-choice__box,\n  .lintje-choice__input:indeterminate ~ .lintje-choice__box,\n  .lintje-choice__input:checked ~ .lintje-choice__radio { border-color: Highlight; }\n  .lintje-choice__radio::after { forced-color-adjust: none; }\n  .lintje-choice__input:checked ~ .lintje-choice__radio::after { background: Highlight; }\n\n  .lintje-choice__switch { border: 1px solid CanvasText; padding: 1px; }\n  .lintje-choice__input:checked ~ .lintje-choice__switch { border-color: Highlight; }\n  .lintje-choice__knob { forced-color-adjust: none; background: CanvasText; }\n  .lintje-choice__input:checked ~ .lintje-choice__switch .lintje-choice__knob { background: Highlight; }\n\n  .lintje-choice__input:disabled ~ .lintje-choice__box,\n  .lintje-choice__input:disabled ~ .lintje-choice__radio,\n  .lintje-choice__input:disabled ~ .lintje-choice__switch { border-color: GrayText; }\n  .lintje-choice__input:disabled:checked ~ .lintje-choice__radio::after,\n  .lintje-choice__input:disabled ~ .lintje-choice__switch .lintje-choice__knob { background: GrayText; }\n  .lintje-choice.is-disabled { color: GrayText; }\n}\n";
+//#endregion
+export { l as a, c as i, p as n, f as r, m as t };

package/dist-elements/chunks/key-CuuOw1KE.js

@@ -0,0 +1,4 @@
+//#region src/components/shared/key.css?inline
+var e = "/*\n * A keyboard key, drawn the same wherever a component shows one: `<kbd class=\"lintje-key\">`.\n */\n/* ------------------------------------------------------------------------ */\n\n/* The UI face, not mono: mono draws the arrow keys at half the size of the letters. */\n.lintje-key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--space-6);\n  height: var(--space-6);\n  padding: 0 var(--space-1);\n  border: 1px solid var(--color-border-heavy);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: var(--text-meta);\n  line-height: 1;\n  white-space: nowrap;\n}\n";
+//#endregion
+export { e as t };

package/dist-elements/chunks/playback-DZJ_NMXv.js

@@ -0,0 +1,133 @@
+var e = .1, t = [
+	{
+		value: 1,
+		label: "1×"
+	},
+	{
+		value: 1.25,
+		label: "1,25×"
+	},
+	{
+		value: 1.5,
+		label: "1,5×"
+	},
+	{
+		value: 2,
+		label: "2×"
+	}
+];
+function n(e) {
+	return t.find((t) => t.value === e)?.label ?? `${String(e).replace(".", ",")}×`;
+}
+function r(e) {
+	let t = Number.isFinite(e) && e > 0 ? Math.floor(e) : 0, n = Math.floor(t / 60), r = t % 60;
+	return `${n}:${String(r).padStart(2, "0")}`;
+}
+function i(e) {
+	let t = Number.isFinite(e) && e > 0 ? Math.floor(e) : 0, n = Math.floor(t / 3600), r = Math.floor(t % 3600 / 60), i = t % 60;
+	return [
+		n ? `${n} uur` : "",
+		r ? `${r} ${r === 1 ? "minuut" : "minuten"}` : "",
+		i || t === 0 ? `${i} ${i === 1 ? "seconde" : "seconden"}` : ""
+	].filter(Boolean).join(" ");
+}
+function a(e, t) {
+	return `${i(e)} van ${i(t)}`;
+}
+function o(e, t) {
+	return !Number.isFinite(e) || e < 0 || !Number.isFinite(t) || t <= 0 ? 0 : Math.min(e, t);
+}
+function s(e, t) {
+	return !Number.isFinite(t) || t <= 0 ? 0 : o(e, t) / t;
+}
+function c(e, t, n, r) {
+	return n <= 0 ? 0 : o(Math.max(0, Math.min(1, (e - t) / n)) * r, r);
+}
+function l(e, t, n) {
+	switch (e) {
+		case "ArrowLeft":
+		case "ArrowDown": return o(t - 5, n);
+		case "ArrowRight":
+		case "ArrowUp": return o(t + 5, n);
+		case "PageDown": return o(t - 30, n);
+		case "PageUp": return o(t + 30, n);
+		case "Home": return 0;
+		case "End": return o(n, n);
+		default: return null;
+	}
+}
+function u(e) {
+	return !Number.isFinite(e) || e <= 0 ? 0 : Math.floor((e + 4) / 8);
+}
+function d(e, t) {
+	let n = e.map((e) => Number.isFinite(e) ? Math.max(0, Math.min(1, e)) : 0);
+	return t <= 0 || n.length === 0 ? [] : t >= n.length ? Array.from({ length: t }, (e, r) => n[Math.floor(r * n.length / t)]) : Array.from({ length: t }, (e, r) => {
+		let i = Math.floor(r * n.length / t), a = Math.max(i + 1, Math.floor((r + 1) * n.length / t));
+		return Math.max(...n.slice(i, a));
+	});
+}
+function f(t, n) {
+	let r;
+	switch (t) {
+		case "ArrowLeft":
+		case "ArrowDown":
+			r = n - e;
+			break;
+		case "ArrowRight":
+		case "ArrowUp":
+			r = n + e;
+			break;
+		case "Home":
+			r = 0;
+			break;
+		case "End":
+			r = 1;
+			break;
+		default: return null;
+	}
+	return Math.round(Math.max(0, Math.min(1, r)) * 100) / 100;
+}
+var p = [
+	"sky-blue",
+	"dark-yellow",
+	"pink",
+	"mint-green",
+	"violet",
+	"green"
+];
+function m(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let { speaker: n } of e) t.has(n) || t.set(n, p[t.size] ?? "other");
+	return t;
+}
+function h(e, t) {
+	return e[_(e, t)]?.speaker ?? null;
+}
+function g(e, t) {
+	if (!Number.isFinite(t) || t <= 0) return [];
+	let n = [];
+	for (let r of e) {
+		let e = s(r.start, t), i = n[n.length - 1];
+		i?.speaker !== r.speaker && (i && (i.to = e), n.push({
+			speaker: r.speaker,
+			from: e,
+			to: 1
+		}));
+	}
+	return n.filter((e) => e.to > e.from);
+}
+function _(e, t) {
+	let n = -1;
+	for (let r = 0; r < e.length && e[r].start <= t; r++) n = r;
+	return n;
+}
+var v = class {
+	constructor(e = 250) {
+		this.interval = e, this.last = -Infinity;
+	}
+	allow(e, t = !1) {
+		return !t && e - this.last < this.interval ? !1 : (this.last = e, !0);
+	}
+};
+//#endregion
+export { r as a, d as c, m as d, g as f, f as g, a as h, o as i, l, c as m, t as n, _ as o, n as p, u as r, s, v as t, h as u };

package/dist-elements/chunks/player-Bq9YGnpt.js

@@ -0,0 +1,208 @@
+import { Gt as e, Kt as t, U as n, Z as r, et as i, ut as a, zt as o } from "./base-rBLTcEIv.js";
+import { a as s, h as c, i as l, l as u, m as d, s as f, t as p } from "./playback-DZJ_NMXv.js";
+//#region src/components/content/audio-player/player.ts
+var m = /* @__PURE__ */ new Set([
+	"BUTTON",
+	"SELECT",
+	"INPUT",
+	"TEXTAREA",
+	"A"
+]), h = class extends o {
+	constructor(...e) {
+		super(...e), this.src = "", this.name = "", this.position = 0, this.heard = 0, this.playing = !1, this.ready = !1, this.failed = !1, this.mediaDuration = NaN, this.speed = 1, this.pendingSeek = null, this.limit = new p(), this.listening = null, this.onMetadata = () => {
+			let e = this.media;
+			if (e && (this.mediaDuration = e.duration, this.ready = !0, this.failed = !1, e.playbackRate = this.speed, this.pendingSeek !== null)) {
+				let e = this.pendingSeek;
+				this.pendingSeek = null, this.seek(e);
+			}
+		}, this.onTimeUpdate = () => {
+			let e = this.media;
+			if (!e) return;
+			this.position = e.currentTime;
+			let t = this.renderRoot.querySelector("[role=\"slider\"][aria-label=\"Positie\"]");
+			(!t || !n(t)) && (this.heard = this.position), this.report(!1);
+		}, this.onSeeked = () => {
+			let e = this.media;
+			e && (this.position = e.currentTime, this.heard = this.position, this.report(!0));
+		}, this.onPlay = () => {
+			this.playing = !0, this.emit("lintje-play");
+		}, this.onPause = () => {
+			if (!this.playing) return;
+			this.playing = !1;
+			let e = this.media;
+			e && (this.position = e.currentTime), this.heard = this.position, this.emit("lintje-pause"), this.report(!0);
+		}, this.onError = () => {
+			this.failed = !0, this.ready = !1, this.playing = !1;
+		}, this.mediaEvents = [
+			["loadedmetadata", this.onMetadata],
+			["durationchange", this.onMetadata],
+			["timeupdate", this.onTimeUpdate],
+			["seeked", this.onSeeked],
+			["play", this.onPlay],
+			["pause", this.onPause],
+			["ended", this.onPause],
+			["error", this.onError]
+		];
+	}
+	static {
+		this.properties = {
+			src: { type: String },
+			name: { type: String },
+			duration: { type: Number },
+			position: { state: !0 },
+			heard: { state: !0 },
+			playing: { state: !0 },
+			ready: { state: !0 },
+			failed: { state: !0 },
+			mediaDuration: { state: !0 },
+			speed: { state: !0 }
+		};
+	}
+	get currentTime() {
+		return this.position;
+	}
+	set currentTime(e) {
+		this.seek(Number(e));
+	}
+	get media() {
+		return this.renderRoot?.querySelector(this.mediaSelector) ?? null;
+	}
+	get length() {
+		return Number.isFinite(this.mediaDuration) && this.mediaDuration > 0 ? this.mediaDuration : this.duration && this.duration > 0 ? this.duration : 0;
+	}
+	seek(e, t = !1) {
+		let n = this.length, r = n > 0 ? l(e, n) : Math.max(0, e || 0);
+		this.position = r, this.heard = r;
+		let i = this.media;
+		i && this.ready ? Math.abs(i.currentTime - r) > .01 && (i.currentTime = r) : this.pendingSeek = r, t && (this.emit("lintje-seek", r), this.report(!0));
+	}
+	report(e) {
+		this.limit.allow(Date.now(), e) && this.emit("lintje-time-change", this.position);
+	}
+	toggle() {
+		let e = this.media;
+		e && this.ready && (e.paused ? e.play()?.catch?.(() => void 0) : e.pause());
+	}
+	play() {
+		this.media?.paused && this.toggle();
+	}
+	skip(e) {
+		this.seek(this.position + e, !0);
+	}
+	setSpeed(e) {
+		this.speed = e;
+		let t = this.media;
+		t && (t.playbackRate = e);
+	}
+	retry() {
+		this.failed = !1, this.media?.load();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("src") && e.get("src") !== void 0 && (this.ready = !1, this.failed = !1, this.playing = !1, this.position = 0, this.heard = 0, this.mediaDuration = NaN, this.pendingSeek = null);
+	}
+	updated(e) {
+		super.updated(e);
+		let t = this.media;
+		if (t !== this.listening) {
+			for (let [e, n] of this.mediaEvents) this.listening?.removeEventListener(e, n), t?.addEventListener(e, n);
+			this.listening = t;
+		}
+	}
+	onGroupKeydown(e) {
+		if (e.key !== " " || e.ctrlKey || e.metaKey || e.altKey) return;
+		let t = e.composedPath()[0];
+		t && m.has(t.tagName) || t?.closest?.("lintje-select, lintje-menu-button") || (e.preventDefault(), this.toggle());
+	}
+	onSliderKeydown(e) {
+		if (!this.ready) return;
+		let t = u(e.key, this.position, this.length);
+		t !== null && (e.preventDefault(), this.seek(t, !0));
+	}
+	seekFromPointer(e) {
+		let t = e.currentTarget.getBoundingClientRect();
+		this.seek(d(e.clientX, t.left, t.width, this.length), !0);
+	}
+	onSliderPointerDown(e) {
+		if (!this.ready || e.button !== 0) return;
+		let t = e.currentTarget;
+		t.setPointerCapture?.(e.pointerId), t.focus(), this.seekFromPointer(e);
+	}
+	onSliderPointerMove(e) {
+		let t = e.currentTarget;
+		this.ready && t.hasPointerCapture?.(e.pointerId) && this.seekFromPointer(e);
+	}
+	renderPlay() {
+		let n = this.playing ? "Pauzeren" : "Afspelen", a = !this.ready;
+		return t`<button
+      type="button"
+      class=${r({
+			"lintje-button": !0,
+			"lintje-button--primary": !0,
+			"lintje-player__play": !0,
+			"is-disabled": a
+		})}
+      aria-label=${n}
+      title=${n}
+      aria-disabled=${a ? "true" : e}
+      @click=${() => {
+			a || this.toggle();
+		}}
+    >
+      ${i(this.playing ? "multimedia-player-pauze" : "multimedia-player-afspelen", { size: 20 })}
+    </button>`;
+	}
+	renderIconButton(n, r, a, o = {}) {
+		let s = o.disabled ?? !this.ready;
+		return t`<button
+      type="button"
+      class="lintje-icon-button lintje-icon-button--flat lintje-player__icon-button ${s ? "is-disabled" : ""} ${o.className ?? ""}"
+      aria-label=${r}
+      title=${r}
+      aria-pressed=${o.pressed === void 0 ? e : String(o.pressed)}
+      aria-disabled=${s ? "true" : e}
+      @click=${() => {
+			s || a();
+		}}
+    >
+      ${i(n, {
+			size: 20,
+			flip: o.flip ? "horizontal" : void 0
+		})}
+    </button>`;
+	}
+	sliderLabel() {
+		return c(this.heard, this.length);
+	}
+	renderBar() {
+		let n = this.length, i = f(this.position, n) * 100;
+		return t`<div
+      class=${r({
+			"lintje-player__bar": !0,
+			"is-disabled": !this.ready
+		})}
+      role="slider"
+      tabindex=${this.ready ? "0" : "-1"}
+      aria-label="Positie"
+      aria-valuemin="0"
+      aria-valuemax=${Math.round(n)}
+      aria-valuenow=${Math.round(this.heard)}
+      aria-valuetext=${this.sliderLabel()}
+      aria-disabled=${this.ready ? e : "true"}
+      @keydown=${this.onSliderKeydown}
+      @pointerdown=${this.onSliderPointerDown}
+      @pointermove=${this.onSliderPointerMove}
+    >
+      <div class="lintje-player__bar-fill" ${a({ width: `${i}%` })}></div>
+      <div class="lintje-player__bar-handle" ${a({ left: `${i}%` })}></div>
+    </div>`;
+	}
+	renderTime(e) {
+		let n = s(this.length);
+		return e ? t`<span class="lintje-player__time"
+      ><strong class="lintje-player__position">${s(this.position)}</strong>
+      <span class="lintje-player__duration">/ ${n}</span></span
+    >` : t`<span class="lintje-player__time is-muted">${n}</span>`;
+	}
+}, g = "/*\n * The parts both players draw (`player.ts`). Adopted next to `button.css` and `icon-button.css`,\n * which draw the buttons and their disabled look; this sheet only sizes them.\n */\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-player__media { display: none; }\n\n.lintje-player__play { width: var(--h-touch); height: var(--h-touch); padding: 0; flex: none; }\n\n.lintje-player__icon-button { width: var(--h-touch); height: var(--h-touch); }\n\n.lintje-player__time {\n  flex: none;\n  font: var(--text-ui);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  color: var(--color-text-primary);\n}\n.lintje-player__position { font-weight: 700; }\n.lintje-player__duration,\n.lintje-player__time.is-muted { color: var(--color-text-muted); }\n\n/* A transparent area above and below the line takes the pointer, never beside it. */\n.lintje-player__bar {\n  position: relative;\n  flex: 1 1 140px;\n  min-width: 0;\n  height: 6px;\n  background: var(--color-border-default);\n  cursor: pointer;\n  touch-action: none;\n}\n.lintje-player__bar::before {\n  content: '';\n  position: absolute;\n  inset: calc((100% - var(--h-target)) / 2) 0;\n}\n.lintje-player__bar.is-disabled { cursor: not-allowed; }\n.lintje-player__bar-fill {\n  height: 100%;\n  background: var(--color-accent-line);\n  pointer-events: none;\n}\n/* The head marks where the recording stands, drawn as the audio player's (`__head`). */\n.lintje-player__bar-handle {\n  position: absolute;\n  top: 50%;\n  width: var(--space-1);\n  height: var(--space-4);\n  transform: translate(-50%, -50%);\n  background: var(--color-text-primary);\n  pointer-events: none;\n}\n.lintje-player__bar.is-disabled .lintje-player__bar-handle { display: none; }\n\n/* Forced colours drop fills; the track and stretch keep their drawing in system colours. */\n@media (forced-colors: active) {\n  .lintje-player__bar,\n  .lintje-player__bar-fill,\n  .lintje-player__bar-handle { forced-color-adjust: none; }\n  .lintje-player__bar { background: CanvasText; }\n  .lintje-player__bar-fill { background: Highlight; }\n  .lintje-player__bar-handle { background: Highlight; outline: 1px solid Canvas; }\n  .lintje-player__bar.is-disabled,\n  .lintje-player__bar.is-disabled .lintje-player__bar-fill { background: GrayText; }\n}\n";
+//#endregion
+export { h as n, g as t };

package/dist-elements/chunks/prose-CmKVp5kL.js

@@ -0,0 +1,4 @@
+//#region src/components/content/prose/prose.css?inline
+var e = "/*\n * Prose: a block of text the server wrote. The one sheet with type selectors inside a block\n * (rule 24): the content is sanitised HTML from markdown with no hook but its tag name, so the\n * selectors are scoped to `.lintje-prose`. A block starts at `h3`; `h1` and `h2` get the same look.\n */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-prose {\n  font: var(--text-body);\n  color: var(--color-text-primary);\n}\n.lintje-prose--muted { font: var(--text-small); color: var(--color-text-muted); }\n\n.lintje-prose > * + * { margin-top: var(--space-3); }\n.lintje-prose h1,\n.lintje-prose h2,\n.lintje-prose h3,\n.lintje-prose h4,\n.lintje-prose h5,\n.lintje-prose h6 { color: var(--color-text-primary); }\n.lintje-prose * + h1,\n.lintje-prose * + h2,\n.lintje-prose * + h3,\n.lintje-prose * + h4,\n.lintje-prose * + h5,\n.lintje-prose * + h6 { margin-top: var(--space-5); }\n\n.lintje-prose h1,\n.lintje-prose h2,\n.lintje-prose h3 { font: var(--text-h2); }\n.lintje-prose h4 { font: var(--text-tile-title); }\n.lintje-prose h5,\n.lintje-prose h6 { font: var(--text-body); font-weight: 700; }\n\n.lintje-prose p { font: var(--text-body); }\n.lintje-prose strong { font-weight: 700; }\n.lintje-prose em { font-style: italic; }\n.lintje-prose small { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-prose figcaption { font: var(--text-small); color: var(--color-text-muted); }\n\n.lintje-prose a { color: var(--color-link); text-decoration: underline; }\n.lintje-prose a:hover { color: var(--color-link-hover); }\n\n/* `base.css` takes the markers off every `ul`/`ol`; prose needs them back. */\n.lintje-prose ul,\n.lintje-prose ol { padding-left: var(--space-5); font: var(--text-body); }\n.lintje-prose ul { list-style: disc; }\n.lintje-prose ol { list-style: decimal; }\n.lintje-prose li { margin-top: var(--space-1); }\n.lintje-prose li::marker { color: var(--color-text-muted); }\n\n.lintje-prose code {\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  padding: 1px var(--space-1);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-prose pre {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  overflow-x: auto;\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  line-height: 1.6;\n}\n.lintje-prose pre code { padding: 0; background: none; border: none; }\n\n.lintje-prose blockquote {\n  margin: 0;\n  padding-left: var(--space-4);\n  border-left: 4px solid var(--color-border-strong);\n  color: var(--color-text-secondary);\n}\n\n.lintje-prose hr {\n  border: none;\n  border-top: 1px solid var(--color-border-default);\n  margin: var(--space-5) 0;\n}\n\n/* The small static table markdown writes; not `lintje-data-table`. */\n.lintje-prose table { border-collapse: collapse; width: 100%; font: var(--text-table); }\n.lintje-prose th,\n.lintje-prose td {\n  border-bottom: 1px solid var(--color-border-default);\n  padding: var(--space-2) var(--space-3);\n  text-align: left;\n}\n.lintje-prose th { font: var(--text-table-head); color: var(--color-text-muted); }\n\n.lintje-prose img { max-width: 100%; height: auto; display: block; }\n";
+//#endregion
+export { e as t };

package/dist-elements/chunks/sentence-CLNJOeXz.js

@@ -0,0 +1,15 @@
+import { Gt as e, Kt as t, et as n } from "./base-rBLTcEIv.js";
+//#region src/components/filters/shared/sentence.ts
+function r(r, i = !0) {
+	return t`${i ? n("lichaam-oog", {
+		size: 16,
+		className: "lintje-filter-summary__icon"
+	}) : e}<span class="lintje-filter-summary__text"
+      >${r.map((e) => e.emphasis ? t`<b>${e.text}</b>` : t`<span>${e.text}</span>`)}</span
+    >`;
+}
+function i(e) {
+	return e.map((e) => e.text).join("");
+}
+//#endregion
+export { i as n, r as t };

package/dist-elements/chunks/sentence-end-8jlqKJ5P.js

@@ -0,0 +1,8 @@
+//#region src/components/shared/sentence-end.ts
+function e(e) {
+	let t = 0;
+	for (let n of e.matchAll(/[.!?…]+["'”’)\]]*\s+/g)) t = n.index + n[0].length;
+	return t;
+}
+//#endregion
+export { e as t };