lintje 0.1.1

package/dist-elements/tag/app-search.js

@@ -0,0 +1,241 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Kt as o, Lt as s, Nt as c, St as l, Z as u, et as d, zt as f } from "../chunks/base-rBLTcEIv.js";
+import { t as p } from "../chunks/focus-trap-w3vCamJ6.js";
+import { t as m } from "../chunks/dialog-close-u75fVEw4.js";
+import { t as h } from "../chunks/key-CuuOw1KE.js";
+import { t as g } from "../chunks/debounce-JXnLMCcF.js";
+//#region src/components/frame/app-search/app-search.css?inline
+var _ = ":host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-app-search__scrim {\n  position: fixed;\n  z-index: 80;\n  inset: 0;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: calc(var(--space-10) * 2) var(--space-6) var(--space-6);\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n.lintje-app-search {\n  display: flex;\n  flex-direction: column;\n  width: min(560px, 100%);\n  max-height: 100%;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-strong);\n  box-shadow: var(--shadow-popover);\n  font: var(--text-ui);\n  animation: lintje-rise var(--dur-modal) var(--ease-in-motion);\n}\n/* The window takes focus only when the trap pulls stray focus back; the field draws the ring. */\n.lintje-app-search:focus { outline: none; }\n\n.lintje-app-search__field {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex: none;\n  padding: var(--space-3);\n  background: var(--color-bg-filter);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-app-search__icon {\n  position: absolute;\n  left: calc(var(--space-3) * 2);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n/* A field like every other, so its focus ring has room inside the band. */\n.lintje-app-search__input {\n  flex: 1;\n  min-width: 0;\n  height: var(--h-control);\n  /* Clears the glyph. */\n  padding: 0 var(--space-3) 0 calc(var(--space-3) + 20px + var(--space-3));\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  font-size: 1rem;\n}\n.lintje-app-search__input::-webkit-search-cancel-button { display: none; }\n\n.lintje-app-search__results {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  padding: var(--space-3) 0 var(--space-2);\n}\n\n.lintje-app-search__heading {\n  padding: var(--space-3) var(--space-4) var(--space-2);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-app-search__group:first-child .lintje-app-search__heading { padding-top: 0; }\n\n.lintje-app-search__option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-height: var(--h-control);\n  padding: 0 var(--space-4);\n  color: var(--color-text-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-app-search__option + .lintje-app-search__option { border-top: 1px solid var(--color-border-default); }\n.lintje-app-search__option:hover { background: var(--color-bg-subtle); }\n/* The chosen row has the virtual focus (`aria-activedescendant`), so it draws the focus ring,\n   inside; the fill alone is too faint to find. */\n.lintje-app-search__option.is-active {\n  background: var(--color-bg-selected);\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n.lintje-app-search__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lintje-app-search__match { font-weight: 700; }\n.lintje-app-search__meta { flex: none; color: var(--color-text-muted); }\n\n.lintje-app-search__busy { display: flex; align-items: center; justify-content: center; padding: var(--space-4); color: var(--color-text-muted); }\n.lintje-app-search__empty { margin: 0; padding: var(--space-4); text-align: center; color: var(--color-text-muted); }\n\n.lintje-app-search__keys {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  flex: none;\n  gap: var(--space-1) var(--space-6);\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-default);\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n}\n.lintje-app-search__hint { display: inline-flex; align-items: center; gap: var(--space-1); }\n\n.lintje-app-search__close:hover { color: var(--color-text-primary); }\n\n/* Phone: a sheet from below, as \"Weergave\", \"Delen\" and the filters open, with their head. Its\n   height stays as the results change, and the field stands high, above the keyboard. */\n.lintje-app-search__header {\n  display: flex; align-items: center; gap: var(--space-2);\n  flex: none;\n  padding: var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-app-search__title { flex: 1; margin: 0; font: var(--text-h2); }\n\n@media (max-width: 767px) {\n  .lintje-app-search__scrim { align-items: flex-end; padding: 0; }\n  .lintje-app-search {\n    width: 100%;\n    height: 88vh;\n    border: 0;\n    border-top: 1px solid var(--color-border-strong);\n    box-shadow: none;\n    animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n  }\n  .lintje-app-search__input { height: var(--h-touch); }\n  .lintje-app-search__option { min-height: var(--h-touch); }\n}\n\n/* Forced colours drop the fill; the ring takes Highlight. */\n@media (forced-colors: active) {\n  .lintje-app-search__option.is-active { outline: 2px solid Highlight; outline-offset: -2px; }\n}\n", v = 200, y = 0;
+function b(e, t) {
+	let n = t.trim();
+	if (!n) return null;
+	let r = e.toLocaleLowerCase("nl").indexOf(n.toLocaleLowerCase("nl"));
+	return r < 0 ? null : [
+		e.slice(0, r),
+		e.slice(r, r + n.length),
+		e.slice(r + n.length)
+	];
+}
+function x(e, t, n) {
+	return n ? "" : e === 0 ? t.trim() ? `Geen resultaten voor “${t.trim()}”` : "" : e === 1 ? "1 resultaat" : `${e} resultaten`;
+}
+var S = class extends f {
+	constructor(...e) {
+		super(...e), this.open = !1, this.label = "Zoeken", this.query = "", this.loading = !1, this.groups = [], this.active = -1, this.#e = new s(this, a), this.#t = new g(this, 200), this.#n = `lintje-app-search-${++y}`, this.#r = null, this.#i = null, this.#a = new p(), this.#o = (e) => {
+			e.key === "Escape" && this.#a.isTopmost() && this.close("escape");
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			r(m),
+			r(h),
+			r(_)
+		];
+	}
+	static {
+		this.properties = {
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			label: { type: String },
+			query: { type: String },
+			loading: {
+				type: Boolean,
+				reflect: !0
+			},
+			groups: { attribute: !1 },
+			active: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	get results() {
+		return this.groups.flatMap((e) => e.items);
+	}
+	get input() {
+		return this.renderRoot.querySelector(".lintje-app-search__input");
+	}
+	optionId(e) {
+		return `${this.#n}-option-${e}`;
+	}
+	#o;
+	connectedCallback() {
+		super.connectedCallback(), this.#r = l({
+			keys: "/",
+			description: "Zoeken",
+			handler: () => {
+				this.open || this.emit("lintje-open");
+			}
+		});
+	}
+	disconnectedCallback() {
+		this.#r?.(), this.#r = null, this.#c(), super.disconnectedCallback();
+	}
+	close(e) {
+		this.emit("lintje-close", { reason: e });
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("groups") || e.has("loading")) && (this.active = !this.loading && this.results.length ? 0 : -1);
+	}
+	updated(e) {
+		super.updated(e), this.open && !this.#i ? this.#s() : !this.open && this.#i && this.#c(), e.has("active") && this.active >= 0 && this.renderRoot.querySelector(`#${this.optionId(this.active)}`)?.scrollIntoView?.({ block: "nearest" });
+	}
+	#s() {
+		this.#i = c(), document.addEventListener("keydown", this.#o);
+		let e = this.renderRoot.querySelector(".lintje-app-search");
+		e && this.#a.activate(e, { focus: this.input ?? !0 });
+	}
+	#c() {
+		this.#i && (this.#t.cancel(), document.removeEventListener("keydown", this.#o), this.#i(), this.#i = null, this.#a.deactivate());
+	}
+	onInput(e) {
+		this.query = e.target.value, this.#t.schedule(() => this.emit("lintje-search", this.query));
+	}
+	onFieldKeydown(e) {
+		let t = this.results.length;
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), t && (this.active = (this.active + 1) % t);
+				return;
+			case "ArrowUp":
+				e.preventDefault(), t && (this.active = (this.active - 1 + t) % t);
+				return;
+			case "Enter": {
+				e.preventDefault();
+				let t = this.results[this.active];
+				t && !this.loading ? this.choose(t) : this.#t.flush();
+			}
+		}
+	}
+	choose(e, t) {
+		if (e.href) {
+			if (t && !i(t)) return;
+			this.followLink(e.href, t);
+		} else this.emit("lintje-action", e.id);
+		this.close("choice");
+	}
+	renderLabel(e) {
+		let t = b(e, this.query);
+		return t ? o`${t[0]}<strong class="lintje-app-search__match">${t[1]}</strong>${t[2]}` : o`${e}`;
+	}
+	renderOption(e, t) {
+		let r = t === this.active, i = u({
+			"lintje-app-search__option": !0,
+			"is-active": r
+		}), a = o`<span class="lintje-app-search__label">${this.renderLabel(e.label)}</span>${e.meta ? o`<span class="lintje-app-search__meta">${e.meta}</span>` : n}`, s = (t) => this.choose(e, t);
+		return e.href ? o`<a
+          id=${this.optionId(t)}
+          class=${i}
+          role="option"
+          aria-selected=${String(r)}
+          tabindex="-1"
+          href=${e.href}
+          @click=${s}
+          >${a}</a
+        >` : o`<div
+          id=${this.optionId(t)}
+          class=${i}
+          role="option"
+          aria-selected=${String(r)}
+          @click=${s}
+        >
+          ${a}
+        </div>`;
+	}
+	renderResults() {
+		let e = 0, t = `${this.#n}-list`, r = this.results.length, i = this.query.trim();
+		return o`
+      ${this.loading ? o`<div class="lintje-app-search__busy">
+            <lintje-spinner label="Zoeken"></lintje-spinner>
+          </div>` : !r && i ? o`<p class="lintje-app-search__empty">Geen resultaten voor “${i}”</p>` : n}
+      <div
+        id=${t}
+        class="lintje-app-search__list"
+        role="listbox"
+        aria-label="Resultaten"
+        ?hidden=${this.loading || !r}
+      >
+        ${this.groups.map((t, r) => {
+			if (!t.items.length) return n;
+			let i = `${this.#n}-group-${r}`;
+			return o`<div class="lintje-app-search__group" role="group" aria-labelledby=${i}>
+            <div id=${i} class="lintje-app-search__heading">${t.label}</div>
+            ${t.items.map((t) => this.renderOption(t, e++))}
+          </div>`;
+		})}
+      </div>
+    `;
+	}
+	render() {
+		if (!this.open) return n;
+		let e = `${this.#n}-list`, t = this.results.length, r = !this.loading && t > 0;
+		return o`<div class="lintje-app-search__scrim" @click=${() => this.close("scrim")}>
+      <div
+        class="lintje-app-search"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Zoeken"
+        tabindex="-1"
+        @click=${(e) => e.stopPropagation()}
+      >
+        ${this.#e.matches ? o`<div class="lintje-app-search__header">
+                <h2 class="lintje-app-search__title">Zoeken</h2>
+                <button
+                  type="button"
+                  class="lintje-dialog-close lintje-app-search__close"
+                  aria-label="Zoeken sluiten"
+                  @click=${() => this.close("button")}
+                >
+                  ${d("functioneel-kruis", { size: 16 })}
+                </button>
+              </div>` : n}
+        <div class="lintje-app-search__field">
+          ${d("functioneel-zoek", {
+			size: 20,
+			className: "lintje-app-search__icon"
+		})}
+          <input
+            class="lintje-app-search__input"
+            type="search"
+            role="combobox"
+            autocomplete="off"
+            spellcheck="false"
+            aria-label=${this.label}
+            aria-autocomplete="list"
+            aria-expanded=${String(r)}
+            aria-controls=${e}
+            aria-activedescendant=${r && this.active >= 0 ? this.optionId(this.active) : n}
+            .value=${this.query}
+            @input=${this.onInput}
+            @keydown=${this.onFieldKeydown}
+          />
+        </div>
+        <div
+          class="lintje-app-search__results"
+          ?hidden=${!this.loading && !t && !this.query.trim()}
+          @mousedown=${(e) => e.preventDefault()}
+        >
+          ${this.renderResults()}
+        </div>
+        <p class="visually-hidden" aria-live="polite">
+          ${x(t, this.query, this.loading)}
+        </p>
+        ${this.#e.matches ? n : o`<p class="lintje-app-search__keys">
+                <span class="lintje-app-search__hint"
+                  ><kbd class="lintje-key">↑</kbd><kbd class="lintje-key">↓</kbd> kiezen</span
+                >
+                <span class="lintje-app-search__hint"><kbd class="lintje-key">Enter</kbd> openen</span>
+                <span class="lintje-app-search__hint"><kbd class="lintje-key">Esc</kbd> sluiten</span>
+              </p>`}
+      </div>
+    </div>`;
+	}
+};
+t("lintje-app-search", S);
+//#endregion
+export { S as LintjeAppSearch, v as SEARCH_DELAY, x as resultsMessage, b as splitMatch };

package/dist-elements/tag/audio-player.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/content/audio-player/audio-player.js'

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

@@ -0,0 +1,353 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, It as i, Kt as a, Lt as o, Z as s, et as c, j as l, q as u, ut as d } from "../chunks/base-rBLTcEIv.js";
+import "./menu-button.js";
+import "./announcement.js";
+import { a as f, c as p, d as m, f as h, g, h as _, m as v, n as y, p as b, r as x, s as S, u as C } from "../chunks/playback-DZJ_NMXv.js";
+import { n as w, t as T } from "../chunks/player-Bq9YGnpt.js";
+//#region src/components/content/audio-player/audio-player.css?inline
+var E = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-audio-player {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  padding: var(--space-4);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n.lintje-audio-player--compact {\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3) var(--space-4);\n  padding: var(--space-2) var(--space-3);\n}\n\n/* Flush: the bar the page draws is the frame; the content keeps its own rhythm. */\n.lintje-audio-player--flush { padding-inline: 0; border: 0; background: none; }\n\n/* Play stands in the middle of the row, whatever stands beside it; on a narrow row the sides\n   keep their content and the middle gives way a little. */\n.lintje-audio-player__controls {\n  display: grid;\n  grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);\n  align-items: center;\n  gap: var(--space-2);\n}\n.lintje-audio-player__start { display: flex; align-items: center; min-width: 0; }\n/* The speed keeps its distance from the volume bar, so it does not read as the bar's value. */\n.lintje-audio-player__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }\n.lintje-audio-player__transport { display: flex; align-items: center; gap: var(--space-2); flex: none; }\n.lintje-audio-player--compact .lintje-audio-player__transport { gap: var(--space-1); }\n\n/* The set has no 15-second icon: the step stands under the arrows as text. */\n.lintje-audio-player__skip { flex-direction: column; }\n.lintje-audio-player__step { font: var(--text-axis); font-weight: 700; }\n\n.lintje-audio-player__times {\n  display: flex;\n  justify-content: space-between;\n  margin-top: calc(-1 * var(--space-2));\n  font: var(--text-small);\n  font-variant-numeric: tabular-nums;\n}\n\n.lintje-audio-player__legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font: var(--text-small);\n}\n.lintje-audio-player--compact .lintje-audio-player__legend { flex-basis: 100%; }\n.lintje-audio-player__speaker { display: flex; align-items: center; gap: var(--space-2); }\n.lintje-audio-player__speaker.is-current { font-weight: 700; }\n.lintje-audio-player__swatch { width: var(--space-3); height: var(--space-3); flex: none; }\n.lintje-audio-player__now { font-weight: 400; color: var(--color-text-muted); }\n\n.lintje-audio-player__wave {\n  position: relative;\n  flex: none;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-1);\n  overflow: visible;\n  cursor: pointer;\n  touch-action: none;\n}\n.lintje-audio-player__peak {\n  flex: 0 1 4px;\n  min-height: 2px;\n  background: var(--color-border-heavy);\n  pointer-events: none;\n}\n.lintje-audio-player__peak.is-played { background: var(--color-accent-line); }\n\n/* The bar thickens under the pointer into its own margin, so nothing around it moves; its hit\n   area (`player.css`) stays 48 px. */\n.lintje-audio-player__bar {\n  flex: none;\n  transition: height var(--dur-hover) var(--ease-in-motion), margin var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-audio-player__bar:hover { height: var(--space-2); margin-block: calc((6px - var(--space-2)) / 2); }\n.lintje-audio-player__stretch { position: absolute; top: 0; bottom: 0; pointer-events: none; }\n.lintje-audio-player__head {\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\n/* One colour per speaker (`--lintje-speaker`, set per bar); what is still to come is quieter. */\n.lintje-audio-player__peak.has-speaker,\n.lintje-audio-player__stretch,\n.lintje-audio-player__swatch { background: var(--lintje-speaker); }\n.lintje-audio-player__peak.has-speaker:not(.is-played),\n.lintje-audio-player__stretch:not(.is-played) { opacity: 0.4; }\n\n.lintje-audio-player__cursor {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: var(--color-text-primary);\n  pointer-events: none;\n}\n.lintje-audio-player__bar .lintje-audio-player__cursor { top: calc(-1 * var(--space-2)); bottom: calc(-1 * var(--space-2)); }\n.lintje-audio-player__cursor-time {\n  position: absolute;\n  bottom: calc(100% + var(--space-1));\n  left: 50%;\n  transform: translateX(-50%);\n  padding: var(--space-1) var(--space-2);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  font: var(--text-small);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  color: var(--color-text-primary);\n}\n\n.lintje-audio-player__volume { display: flex; align-items: center; gap: var(--space-1); flex: none; }\n/* A transparent area above and below the line takes the pointer, as on the position bar. */\n.lintje-audio-player__level {\n  position: relative;\n  width: calc(2 * var(--space-10));\n  height: 6px;\n  background: var(--color-border-default);\n  cursor: pointer;\n  touch-action: none;\n}\n.lintje-audio-player__level::before {\n  content: '';\n  position: absolute;\n  inset: calc((100% - var(--h-target)) / 2) 0;\n}\n.lintje-audio-player__level-fill { height: 100%; background: var(--color-accent-line); pointer-events: none; }\n\n.lintje-audio-player__skeleton,\n.lintje-audio-player__alert { flex: none; }\n/* On one line the slider takes the room the buttons leave. */\n.lintje-audio-player--compact .lintje-audio-player__wave,\n.lintje-audio-player--compact .lintje-audio-player__bar,\n.lintje-audio-player--compact .lintje-audio-player__skeleton,\n.lintje-audio-player--compact .lintje-audio-player__alert { flex: 1 1 240px; min-width: 0; }\n.lintje-audio-player__speed { flex: none; }\n\n/* Forced colours drop fills; the bars keep their drawing in system colours. */\n@media (forced-colors: active) {\n  .lintje-audio-player__peak,\n  .lintje-audio-player__stretch,\n  .lintje-audio-player__swatch,\n  .lintje-audio-player__head,\n  .lintje-audio-player__cursor,\n  .lintje-audio-player__level,\n  .lintje-audio-player__level-fill { forced-color-adjust: none; background: CanvasText; }\n  .lintje-audio-player__peak.is-played,\n  .lintje-audio-player__stretch.is-played,\n  .lintje-audio-player__level-fill { background: Highlight; }\n}\n\n/* A phone of 320 px still fits mute, the three buttons and the speed: each keeps its 48 px. */\n@media (max-width: 767px) {\n  .lintje-audio-player__controls,\n  .lintje-audio-player__transport { gap: 0; }\n}\n", D = {
+	kind: "outage",
+	text: "De opname kan niet worden geladen.",
+	live: !0
+}, O = (e) => e ? `var(--color-chart-${e})` : null, k = .5, A = class extends w {
+	constructor(...e) {
+		super(...e), this.segments = [], this.noLegend = !1, this.compact = !1, this.flush = !1, this.hoverTime = null, this.waveWidth = 0, this.volume = 1, this.muted = !1, this.mediaSelector = "audio", this.mobile = new o(this, i), this.observer = null, this.observed = null, this.onRetry = () => {
+			this.retry(), this.updateComplete.then(() => this.renderRoot.querySelector(".lintje-player__play")?.focus());
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			r(u),
+			r(l),
+			r(T),
+			r(E)
+		];
+	}
+	static {
+		this.properties = {
+			peaks: { attribute: !1 },
+			segments: { attribute: !1 },
+			noLegend: {
+				type: Boolean,
+				attribute: "no-legend"
+			},
+			compact: {
+				type: Boolean,
+				reflect: !0
+			},
+			flush: {
+				type: Boolean,
+				reflect: !0
+			},
+			hoverTime: { state: !0 },
+			waveWidth: { state: !0 },
+			volume: { state: !0 },
+			muted: { state: !0 }
+		};
+	}
+	get hasPeaks() {
+		return !!(this.peaks && this.peaks.length > 0);
+	}
+	get colours() {
+		return m(this.segments ?? []);
+	}
+	disconnectedCallback() {
+		this.observer?.disconnect(), this.observer = null, this.observed = null, super.disconnectedCallback();
+	}
+	updated(e) {
+		super.updated(e);
+		let t = this.renderRoot.querySelector(".lintje-audio-player__wave");
+		t !== this.observed && (this.observer?.disconnect(), this.observed = t, t && typeof ResizeObserver < "u" && (this.observer = new ResizeObserver((e) => {
+			let t = Math.round(e[0]?.contentRect.width ?? 0);
+			t !== this.waveWidth && (this.waveWidth = t);
+		}), this.observer.observe(t)));
+	}
+	sliderLabel() {
+		let e = C(this.segments ?? [], this.heard), t = _(this.heard, this.length);
+		return e ? `${t}, ${e}` : t;
+	}
+	setVolume(e) {
+		this.volume = e, this.muted = e === 0, this.applyVolume();
+	}
+	toggleMute() {
+		this.muted && this.volume === 0 && (this.volume = k), this.muted = !this.muted, this.applyVolume();
+	}
+	applyVolume() {
+		let e = this.media;
+		e && (e.volume = this.volume, e.muted = this.muted);
+	}
+	onWaveMove(e) {
+		let t = e.currentTarget.getBoundingClientRect();
+		this.hoverTime = this.ready ? v(e.clientX, t.left, t.width, this.length) : null, this.onSliderPointerMove(e);
+	}
+	volumeFromPointer(e) {
+		let t = e.currentTarget.getBoundingClientRect();
+		this.setVolume(Math.round(v(e.clientX, t.left, t.width, 1) * 100) / 100);
+	}
+	onVolumePointerDown(e) {
+		if (e.button !== 0) return;
+		let t = e.currentTarget;
+		t.setPointerCapture?.(e.pointerId), t.focus(), this.volumeFromPointer(e);
+	}
+	onVolumePointerMove(e) {
+		e.currentTarget.hasPointerCapture?.(e.pointerId) && this.volumeFromPointer(e);
+	}
+	onVolumeKeydown(e) {
+		let t = g(e.key, this.muted ? 0 : this.volume);
+		t !== null && (e.preventDefault(), this.setVolume(t));
+	}
+	onSpeedMenu(e) {
+		e.stopPropagation(), this.setSpeed(Number(e.detail));
+	}
+	renderCursor() {
+		let e = this.hoverTime;
+		if (e === null) return n;
+		let t = C(this.segments ?? [], e);
+		return a`<span
+      class="lintje-audio-player__cursor"
+      aria-hidden="true"
+      ${d({ left: `${S(e, this.length) * 100}%` })}
+      ><span class="lintje-audio-player__cursor-time"
+        >${f(e)}${t ? ` · ${t}` : ""}</span
+      ></span
+    >`;
+	}
+	renderWave() {
+		let e = this.peaks ?? [], t = typeof ResizeObserver < "u" && this.waveWidth === 0, n = this.waveWidth > 0 ? x(this.waveWidth) : t ? 0 : e.length, r = p(e, n), i = Math.round(S(this.position, this.length) * r.length), o = this.segments ?? [], c = this.colours, l = this.length;
+		return a`<div
+      class="lintje-audio-player__wave"
+      role="slider"
+      tabindex="0"
+      aria-label="Positie"
+      aria-valuemin="0"
+      aria-valuemax=${Math.round(this.length)}
+      aria-valuenow=${Math.round(this.heard)}
+      aria-valuetext=${this.sliderLabel()}
+      @keydown=${this.onSliderKeydown}
+      @pointerdown=${this.onSliderPointerDown}
+      @pointermove=${this.onWaveMove}
+      @pointerleave=${() => this.hoverTime = null}
+    >
+      ${r.map((e, t) => {
+			let n = C(o, (t + .5) / r.length * l), u = n ? c.get(n) : void 0;
+			return a`<span
+          class=${s({
+				"lintje-audio-player__peak": !0,
+				"is-played": t < i,
+				"has-speaker": !!u
+			})}
+          ${d({
+				height: `${Math.max(e, .08) * 100}%`,
+				"--lintje-speaker": O(u)
+			})}
+        ></span>`;
+		})}
+      <span
+        class="lintje-audio-player__head"
+        aria-hidden="true"
+        ${d({ left: `${S(this.position, l) * 100}%` })}
+      ></span>
+      ${this.renderCursor()}
+    </div>`;
+	}
+	renderTrack() {
+		let e = this.length, t = S(this.position, e), n = this.colours, r = h(this.segments ?? [], e).flatMap((e) => {
+			let r = n.get(e.speaker), i = Math.min(Math.max(t, e.from), e.to);
+			return [{
+				from: e.from,
+				to: i,
+				colour: r,
+				played: !0
+			}, {
+				from: i,
+				to: e.to,
+				colour: r,
+				played: !1
+			}].filter((e) => e.to > e.from);
+		});
+		return a`<div
+      class="lintje-player__bar lintje-audio-player__bar"
+      role="slider"
+      tabindex="0"
+      aria-label="Positie"
+      aria-valuemin="0"
+      aria-valuemax=${Math.round(this.length)}
+      aria-valuenow=${Math.round(this.heard)}
+      aria-valuetext=${this.sliderLabel()}
+      @keydown=${this.onSliderKeydown}
+      @pointerdown=${this.onSliderPointerDown}
+      @pointermove=${this.onWaveMove}
+      @pointerleave=${() => this.hoverTime = null}
+    >
+      ${r.length === 0 ? a`<div
+              class="lintje-player__bar-fill"
+              ${d({ width: `${t * 100}%` })}
+            ></div>` : r.map((e) => a`<span
+                  class=${s({
+			"lintje-audio-player__stretch": !0,
+			"is-played": e.played
+		})}
+                  ${d({
+			left: `${e.from * 100}%`,
+			width: `${(e.to - e.from) * 100}%`,
+			"--lintje-speaker": O(e.colour)
+		})}
+                ></span>`)}
+      <span
+        class="lintje-audio-player__head"
+        aria-hidden="true"
+        ${d({ left: `${t * 100}%` })}
+      ></span>
+      ${this.renderCursor()}
+    </div>`;
+	}
+	renderSlider() {
+		return this.failed ? a`<lintje-announcement compact class="lintje-audio-player__alert" .data=${D}>
+        <lintje-button slot="action" variant="link" @click=${this.onRetry}
+          >Opnieuw proberen</lintje-button
+        >
+      </lintje-announcement>` : this.ready ? this.hasPeaks ? this.renderWave() : this.renderTrack() : a`<lintje-skeleton
+        class="lintje-audio-player__skeleton"
+        height=${this.hasPeaks ? "48" : "6"}
+      ></lintje-skeleton>`;
+	}
+	renderLegend() {
+		let e = this.colours;
+		if (e.size === 0 || this.noLegend) return n;
+		let t = C(this.segments ?? [], this.position);
+		return a`<ul class="lintje-audio-player__legend" aria-label="Sprekers">
+      ${[...e].map(([e, r]) => a`<li
+            class=${s({
+			"lintje-audio-player__speaker": !0,
+			"is-current": e === t
+		})}
+          >
+            <span
+              class="lintje-audio-player__swatch"
+              aria-hidden="true"
+              ${d({ "--lintje-speaker": O(r) })}
+            ></span>
+            <span>${e}</span>
+            ${e === t ? a`<span class="lintje-audio-player__now">spreekt nu</span>` : n}
+          </li>`)}
+    </ul>`;
+	}
+	renderSkip(e) {
+		let t = `15 seconden ${e < 0 ? "terug" : "vooruit"}`, r = !this.ready;
+		return a`<button
+      type="button"
+      class=${s({
+			"lintje-icon-button": !0,
+			"lintje-icon-button--flat": !0,
+			"lintje-player__icon-button": !0,
+			"lintje-audio-player__skip": !0,
+			"is-disabled": r
+		})}
+      aria-label=${t}
+      title=${t}
+      aria-disabled=${r ? "true" : n}
+      @click=${() => {
+			r || this.skip(e * 15);
+		}}
+    >
+      ${c("functioneel-dubbel-delta-rechts", {
+			size: 20,
+			flip: e < 0 ? "horizontal" : void 0
+		})}
+      <span class="lintje-audio-player__step" aria-hidden="true">${15}</span>
+    </button>`;
+	}
+	renderTransport() {
+		return a`<div class="lintje-audio-player__transport">
+      ${this.renderSkip(-1)} ${this.renderPlay()} ${this.renderSkip(1)}
+    </div>`;
+	}
+	renderMute() {
+		return this.renderIconButton(this.muted ? "functioneel-geluid-uit" : "functioneel-geluid-aan", "Geluid dempen", () => this.toggleMute(), {
+			disabled: !1,
+			pressed: this.muted
+		});
+	}
+	renderVolume() {
+		let e = this.muted ? 0 : this.volume, t = Math.round(e * 100);
+		return a`<div class="lintje-audio-player__volume">
+      ${this.renderMute()}
+      <div
+        class="lintje-audio-player__level"
+        role="slider"
+        tabindex="0"
+        aria-label="Volume"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${t}
+        aria-valuetext=${this.muted ? "Gedempt" : `${t} procent`}
+        @keydown=${this.onVolumeKeydown}
+        @pointerdown=${this.onVolumePointerDown}
+        @pointermove=${this.onVolumePointerMove}
+      >
+        <div class="lintje-audio-player__level-fill" ${d({ width: `${t}%` })}></div>
+      </div>
+    </div>`;
+	}
+	renderSpeed(e = !1) {
+		let t = y.map((e) => ({
+			value: String(e.value),
+			label: e.label,
+			checked: e.value === this.speed,
+			radio: !0
+		})), n = b(this.speed);
+		return a`<lintje-menu-button
+      class="lintje-audio-player__speed"
+      variant="flat"
+      placement="bottom-end"
+      leading-icon=${e ? "" : "multimedia-player-vooruitspoelen"}
+      label=${n}
+      accessible-label=${`Afspeelsnelheid ${n}`}
+      ?disabled=${!this.ready}
+      .items=${t}
+      @lintje-action=${this.onSpeedMenu}
+    ></lintje-menu-button>`;
+	}
+	renderTimes() {
+		return a`<div class="lintje-audio-player__times">
+      <strong class="lintje-player__position">${f(this.position)}</strong>
+      <span class="lintje-player__duration">${f(this.length)}</span>
+    </div>`;
+	}
+	renderFull(e) {
+		return a`${this.renderLegend()} ${this.renderSlider()}
+      ${e && !this.failed ? this.renderTimes() : n}
+      <div class="lintje-audio-player__controls">
+        <div class="lintje-audio-player__start">
+          ${e ? this.renderMute() : this.renderTime(!0)}
+        </div>
+        ${this.renderTransport()}
+        <div class="lintje-audio-player__end">
+          ${e ? n : this.renderVolume()} ${this.renderSpeed(e)}
+        </div>
+      </div>`;
+	}
+	renderCompact() {
+		return a`${this.renderLegend()} ${this.renderTransport()} ${this.renderSlider()}
+    ${this.renderTime(!0)} ${this.renderVolume()} ${this.renderSpeed()}`;
+	}
+	render() {
+		let e = this.mobile.matches, t = this.compact && !e;
+		return a`<div
+      class=${s({
+			"lintje-audio-player": !0,
+			"lintje-audio-player--compact": t,
+			"lintje-audio-player--flush": this.flush
+		})}
+      role="group"
+      aria-label=${this.name || "Opname"}
+      @keydown=${this.onGroupKeydown}
+    >
+      <audio class="lintje-player__media" preload="metadata" src=${this.src || n}></audio>
+      ${t ? this.renderCompact() : this.renderFull(e)}
+    </div>`;
+	}
+};
+t("lintje-audio-player", A);
+//#endregion
+export { A as LintjeAudioPlayer };

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

@@ -0,0 +1 @@
+export * from '../types/primitives/badge/badge.js'

package/dist-elements/tag/badge.js

@@ -0,0 +1 @@
+export { J as LintjeBadge, Y as badgeStyles, X as renderBadge } from "../chunks/base-rBLTcEIv.js";

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

@@ -0,0 +1 @@
+export * from '../types/components/frame/breadcrumbs/breadcrumbs.js'