lintje 0.2.0 → 0.3.0

package/dist-elements/tag/transcript.js

@@ -1,4 +1,4 @@
-import { $ as e, Bt as t, Gt as n, H as r, Ht as i, U as a, X as o, Y as s, Z as c, et as l, g as u, qt as d, ut as f, zt as p } from "../chunks/base-Bg-IFOPG.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-CbmWxUig.js";
 import "./menu-button.js";
 import "./highlight.js";
 import "./textarea.js";
@@ -51,7 +51,7 @@ function S(e, t) {
 		}
 	];
 }
-var C = class extends p {
+var C = class extends e {
 	constructor(...e) {
 		super(...e), this.segments = [], this.readonly = !1, this.size = "regular", this.layout = "rows", this.tinted = !1, this.grouped = !1, this.errors = {}, this.searchMatches = {}, this.hasNote = !1, this.lastUserScroll = -Infinity, this.followed = null, this.savedFrom = null, this.onNoteChange = (e) => {
 			this.hasNote = e.target.assignedNodes({ flatten: !0 }).length > 0;
@@ -63,8 +63,8 @@ var C = class extends p {
 	}
 	static {
 		this.styles = [
-			e,
-			s,
+			c,
+			a,
 			i(_)
 		];
 	}
@@ -158,20 +158,20 @@ var C = class extends p {
 	willUpdate(e) {
 		if (super.willUpdate(e), e.has("busyId") && this.busyId) {
 			let e = this.segmentElement(this.busyId)?.querySelector("lintje-textarea");
-			this.savedFrom = e && a(e) ? this.busyId : null;
+			this.savedFrom = e && t(e) ? this.busyId : null;
 		}
 	}
 	keepSaveFocus() {
 		let e = this.savedFrom;
 		if (!e) return;
-		let t = this.segmentElement(e)?.querySelector(".lintje-transcript__editor");
+		let n = this.segmentElement(e)?.querySelector(".lintje-transcript__editor");
 		if (this.busyId === e) {
-			t?.querySelector("lintje-button")?.shadowRoot?.querySelector("button")?.focus();
+			n?.querySelector("lintje-button")?.shadowRoot?.querySelector("button")?.focus();
 			return;
 		}
-		if (this.savedFrom = null, this.editingId !== e || !t) return;
-		let n = r();
-		(!n || n === document.body || a(t)) && this.focusInside(t.querySelector("lintje-textarea"), "textarea");
+		if (this.savedFrom = null, this.editingId !== e || !n) return;
+		let i = r();
+		(!i || i === document.body || t(n)) && this.focusInside(n.querySelector("lintje-textarea"), "textarea");
 	}
 	updated(e) {
 		if (super.updated(e), e.has("busyId") && this.keepSaveFocus(), e.has("editingId")) {
@@ -180,7 +180,7 @@ var C = class extends p {
 		}
 		(e.has("currentTime") || e.has("segments")) && this.follow(), e.has("currentMatch") && this.currentMatch && this.renderRoot.querySelector("lintje-highlight[kind=\"match\"][current]")?.scrollIntoView?.({
 			block: "nearest",
-			behavior: u() ? "auto" : "smooth"
+			behavior: p() ? "auto" : "smooth"
 		});
 	}
 	reveal() {
@@ -188,31 +188,31 @@ var C = class extends p {
 		let e = this.segments[this.currentIndex];
 		e && (this.followed = e.id, this.updateComplete.then(() => this.segmentElement(e.id)?.scrollIntoView?.({
 			block: "center",
-			behavior: u() ? "auto" : "smooth"
+			behavior: p() ? "auto" : "smooth"
 		})));
 	}
 	follow() {
 		let e = this.segments[this.currentIndex];
 		e && e.id !== this.followed && !this.editingId && x(Date.now(), this.lastUserScroll) && (this.followed = e.id, this.segmentElement(e.id)?.scrollIntoView?.({
 			block: "nearest",
-			behavior: u() ? "auto" : "smooth"
+			behavior: p() ? "auto" : "smooth"
 		}));
 	}
 	renderText(e) {
-		let t = this.currentMatch?.id === e.id ? this.currentMatch.index : -1, r = b(e.text, e.uncertain, this.searchMatches?.[e.id]);
-		return d`<p class="lintje-transcript__text">
-      ${r.map((e) => {
-			let n = e.uncertain ? d`<lintje-highlight kind="uncertain">${e.text}</lintje-highlight>` : e.text;
-			return e.match === -1 ? n : d`<lintje-highlight kind="match" ?current=${e.match === t}
+		let t = this.currentMatch?.id === e.id ? this.currentMatch.index : -1, n = b(e.text, e.uncertain, this.searchMatches?.[e.id]);
+		return l`<p class="lintje-transcript__text">
+      ${n.map((e) => {
+			let n = e.uncertain ? l`<lintje-highlight kind="uncertain">${e.text}</lintje-highlight>` : e.text;
+			return e.match === -1 ? n : l`<lintje-highlight kind="match" ?current=${e.match === t}
               >${n}</lintje-highlight
             >`;
-		})}${e.pending ? d` <span class="lintje-transcript__pending">${e.pending}</span
-              ><span class="lintje-transcript__caret" aria-hidden="true"></span>` : n}
+		})}${e.pending ? l` <span class="lintje-transcript__pending">${e.pending}</span
+              ><span class="lintje-transcript__caret" aria-hidden="true"></span>` : s}
     </p>`;
 	}
 	renderEditor(e) {
 		let t = this.busyId === e.id;
-		return d`<div
+		return l`<div
       class="lintje-transcript__editor"
       @keydown=${(t) => this.onEditorKeydown(e, t)}
     >
@@ -223,7 +223,7 @@ var C = class extends p {
         hint="Ctrl+Enter bewaart, Esc annuleert"
         .value=${e.text}
         ?disabled=${t}
-        error=${this.errors?.[e.id] || n}
+        error=${this.errors?.[e.id] || s}
       ></lintje-textarea>
       <div class="lintje-transcript__actions">
         <lintje-button
@@ -244,7 +244,7 @@ var C = class extends p {
     </div>`;
 	}
 	renderSpeaker(e, t) {
-		return this.readonly ? d`<span class="lintje-transcript__speaker is-static">${e.speaker}</span>` : d`<lintje-menu-button
+		return this.readonly ? l`<span class="lintje-transcript__speaker is-static">${e.speaker}</span>` : l`<lintje-menu-button
       class="lintje-transcript__speaker"
       variant="flat"
       label=${e.speaker}
@@ -254,26 +254,26 @@ var C = class extends p {
     ></lintje-menu-button>`;
 	}
 	renderTime(e, t) {
-		let r = m(e.start);
-		return this.readonly ? d`<span class="lintje-transcript__time is-static">${r}</span>` : d`<button
+		let n = m(e.start);
+		return this.readonly ? l`<span class="lintje-transcript__time is-static">${n}</span>` : l`<button
       type="button"
       class="lintje-transcript__time"
-      aria-label=${`Speel af vanaf ${r}`}
+      aria-label=${`Speel af vanaf ${n}`}
       @click=${() => this.seek(e)}
     >
-      ${t ? l("multimedia-player-afspelen", {
+      ${t ? f("multimedia-player-afspelen", {
 			size: 12,
 			className: "lintje-transcript__playing"
-		}) : n}${r}
+		}) : s}${n}
     </button>`;
 	}
 	render() {
 		let e = this.currentIndex, t = this.speakers?.length ? this.speakers.map((e) => ({
 			start: 0,
 			speaker: e
-		})) : null, r = h(t ?? this.segments), i = [...r.keys()];
-		return d`<div class="lintje-transcript">
-      <div class=${c({
+		})) : null, n = h(t ?? this.segments), r = [...n.keys()];
+		return l`<div class="lintje-transcript">
+      <div class=${d({
 			"lintje-transcript__note": !0,
 			"has-note": this.hasNote
 		})}>
@@ -289,39 +289,39 @@ var C = class extends p {
         @touchmove=${this.onUserScroll}
         @keydown=${this.onListKeydown}
       >
-        ${this.segments.map((t, a) => {
-			let s = a === e, l = this.editingId === t.id, u = this.segments[a - 1]?.speaker === t.speaker, p = r.get(t.speaker);
-			return d`<li
-            class=${c({
+        ${this.segments.map((t, i) => {
+			let a = i === e, c = this.editingId === t.id, f = this.segments[i - 1]?.speaker === t.speaker, p = n.get(t.speaker);
+			return l`<li
+            class=${d({
 				"lintje-transcript__segment": !0,
-				"is-current": s,
-				"is-editing": l,
-				"is-repeat": u
+				"is-current": a,
+				"is-editing": c,
+				"is-repeat": f
 			})}
             data-id=${t.id}
-            aria-current=${s ? "true" : n}
-            ${f({ "--lintje-speaker": p ? `var(--color-chart-${p})` : null })}
+            aria-current=${a ? "true" : s}
+            ${o({ "--lintje-speaker": p ? `var(--color-chart-${p})` : null })}
           >
             <div class="lintje-transcript__who">
-              ${this.renderSpeaker(t, i)}
-              ${t.id === this.speakingId ? d`<span class="lintje-transcript__now">spreekt nu</span>` : n}
+              ${this.renderSpeaker(t, r)}
+              ${t.id === this.speakingId ? l`<span class="lintje-transcript__now">spreekt nu</span>` : s}
             </div>
             <div class="lintje-transcript__when">
-              ${this.renderTime(t, s)}
-              ${(t.tags ?? []).map((e) => o({
+              ${this.renderTime(t, a)}
+              ${(t.tags ?? []).map((e) => u({
 				value: e.label,
 				tone: e.tone ?? "neutral"
 			}))}
             </div>
             <div
               class="lintje-transcript__body"
-              @dblclick=${this.readonly || l ? n : (e) => {
+              @dblclick=${this.readonly || c ? s : (e) => {
 				e.preventDefault(), getSelection()?.removeAllRanges(), this.edit(t);
 			}}
             >
-              ${l ? this.renderEditor(t) : this.renderText(t)}
+              ${c ? this.renderEditor(t) : this.renderText(t)}
             </div>
-            ${this.readonly || l ? n : d`<lintje-icon-button
+            ${this.readonly || c ? s : l`<lintje-icon-button
                     class="lintje-transcript__edit"
                     icon="functioneel-bewerken"
                     label=${`Fragment van ${m(t.start)} bewerken`}
@@ -334,6 +334,6 @@ var C = class extends p {
     </div>`;
 	}
 };
-t("lintje-transcript", C);
+n("lintje-transcript", C);
 //#endregion
 export { v as FOLLOW_PAUSE, C as LintjeTranscript, b as markedParts, x as shouldFollow, S as speakerMenu };

package/dist-elements/tag/translator.js

@@ -1,7 +1,7 @@
-import { Bt as e, Gt as t, Ht as n, It as r, Lt as i, qt as a, zt as o } from "../chunks/base-Bg-IFOPG.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-CbmWxUig.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 (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";
+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";
 //#endregion
 //#region src/components/content/translator/translator.ts
 function c(e) {
@@ -10,12 +10,12 @@ function c(e) {
 	let { options: n, value: r } = t ?? {};
 	return Array.isArray(n) && n.find((e) => e.value === r)?.label || "";
 }
-var l = class extends o {
-	constructor(...e) {
-		super(...e), this.value = "", this.placeholder = "Typ of plak hier je tekst", this.sourceLabel = "Tekst om te vertalen", this.targetLabel = "Vertaling", this.variant = "text", this.spoken = "", this.spokenTimer = 0, this.#e = new i(this, r);
+var l = class extends t {
+	constructor(...t) {
+		super(...t), this.value = "", this.placeholder = "Typ of plak hier je tekst", this.sourceLabel = "Tekst om te vertalen", this.targetLabel = "Vertaling", this.variant = "text", this.spoken = "", this.spokenTimer = 0, this.#e = new n(this, e);
 	}
 	static {
-		this.styles = n(s);
+		this.styles = i(s);
 	}
 	static {
 		this.properties = {
@@ -57,10 +57,10 @@ var l = class extends o {
 		}, 100);
 	}
 	renderStatus() {
-		return a`<span class="visually-hidden" role="status">${this.spoken}</span>`;
+		return o`<span class="visually-hidden" role="status">${this.spoken}</span>`;
 	}
 	renderSwap() {
-		return a`<div class="lintje-translator__swap">
+		return o`<div class="lintje-translator__swap">
       <lintje-icon-button
         icon="functioneel-wissel-horizontaal"
         label="Talen omwisselen"
@@ -70,7 +70,7 @@ var l = class extends o {
     </div>`;
 	}
 	renderDocuments() {
-		return a`<div class="lintje-translator lintje-translator--documents">
+		return o`<div class="lintje-translator lintje-translator--documents">
       <div class="lintje-translator__bars">
         <div class="lintje-translator__half">
           <div class="lintje-translator__bar lintje-translator__bar--source"><slot name="source-language"></slot></div>
@@ -84,7 +84,7 @@ var l = class extends o {
     </div>${this.renderStatus()}`;
 	}
 	render() {
-		return this.variant === "documents" ? this.renderDocuments() : a`<div class="lintje-translator">
+		return this.variant === "documents" ? this.renderDocuments() : o`<div class="lintje-translator">
       <div class="lintje-translator__half" role="group" aria-label=${this.sourceLabel}>
         <div class="lintje-translator__bar lintje-translator__bar--source"><slot name="source-language"></slot></div>
         <div class="lintje-translator__body lintje-translator__body--source">
@@ -100,13 +100,13 @@ var l = class extends o {
             .placeholder=${this.placeholder}
             @lintje-change=${this.onText}
           ></lintje-textarea>
-          ${this.value ? a`<lintje-icon-button
+          ${this.value ? o`<lintje-icon-button
                   class="lintje-translator__clear"
                   icon="functioneel-kruis"
                   label="Tekst wissen"
                   variant="flat"
                   @click=${this.clear}
-                ></lintje-icon-button>` : t}
+                ></lintje-icon-button>` : a}
         </div>
         <div class="lintje-translator__foot">
           <slot name="source-actions"></slot>
@@ -126,6 +126,6 @@ var l = class extends o {
     </div>${this.renderStatus()}`;
 	}
 };
-e("lintje-translator", l);
+r("lintje-translator", l);
 //#endregion
 export { l as LintjeTranslator };

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

@@ -1,4 +1,4 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, qt as o, ut as s, zt as c } from "../chunks/base-Bg-IFOPG.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-CbmWxUig.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
@@ -23,12 +23,12 @@ function f(e, t, n) {
 	}
 	return -1;
 }
-var p = class extends c {
+var p = class extends e {
 	constructor(...e) {
 		super(...e), this.nodes = [], this.expanded = [], this.name = "", this.open = /* @__PURE__ */ new Set(), this.focusId = null;
 	}
 	static {
-		this.styles = [e, r(l)];
+		this.styles = [a, n(l)];
 	}
 	static {
 		this.properties = {
@@ -118,41 +118,41 @@ var p = class extends c {
       @click=${(n) => {
 			n.stopPropagation(), this.toggle(e, !t);
 		}}
-      >${a(t ? "functioneel-delta-omlaag" : "functioneel-delta-rechts", { size: 16 })}</span
+      >${c(t ? "functioneel-delta-omlaag" : "functioneel-delta-rechts", { size: 16 })}</span
     >`;
 	}
-	item(e, t, r) {
+	item(e, t, n) {
 		let a = u(e), c = a && this.open.has(e.id), l = e.id === this.selectedId, d = e.count ?? e.children?.length;
 		return o`<li
       class="lintje-tree__item"
       role="treeitem"
       data-id=${e.id}
-      tabindex=${e.id === r ? "0" : "-1"}
+      tabindex=${e.id === n ? "0" : "-1"}
       aria-level=${t}
       aria-selected=${l ? "true" : "false"}
-      aria-expanded=${a ? String(c) : n}
-      aria-busy=${e.loading ? "true" : n}
+      aria-expanded=${a ? String(c) : i}
+      aria-busy=${e.loading ? "true" : i}
       @focus=${(t) => {
 			t.target === t.currentTarget && (this.focusId = e.id);
 		}}
     >
       <div
-        class=${i({
+        class=${s({
 			"lintje-tree__row": !0,
 			"is-selected": l
 		})}
-        ${s({ "--lintje-tree-depth": t - 1 })}
+        ${r({ "--lintje-tree-depth": t - 1 })}
         @click=${() => {
 			this.choose(e), this.moveFocus(e.id);
 		}}
       >
         ${this.arrow(e)}
         <span class="lintje-tree__label">${e.label}</span>
-        ${a && !c && d ? o`<span class="lintje-tree__count">· ${d}</span>` : n}
+        ${a && !c && d ? o`<span class="lintje-tree__count">· ${d}</span>` : i}
       </div>
       ${c && e.children?.length ? o`<ul class="lintje-tree__group" role="group">
-              ${e.children.map((e) => this.item(e, t + 1, r))}
-            </ul>` : n}
+              ${e.children.map((e) => this.item(e, t + 1, n))}
+            </ul>` : i}
     </li>`;
 	}
 	render() {

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

@@ -1,13 +1,13 @@
-import { $ as e, Bt as t, G as n, Gt as r, Ht as i, I as a, Z as o, et as s, qt as c, zt as l } from "../chunks/base-Bg-IFOPG.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-CbmWxUig.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 l {
+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 {
 	static {
 		this.styles = [
-			e,
-			i(u),
-			i(p),
-			i(m)
+			o,
+			r(u),
+			r(p),
+			r(m)
 		];
 	}
 	static {
@@ -58,7 +58,7 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
 	constructor() {
 		super(), this.items = [], this.csrf = "", this.inline = !1, this.open = !1, this.#e = `lintje-user-menu-${++h}`, this.#t = null, this.onFocusOut = (e) => {
 			let t = e.relatedTarget;
-			this.open && t && !n(t, this) && !n(this, t) && this.hide(!1);
+			this.open && t && !a(t, this) && !a(this, t) && this.hide(!1);
 		}, this.onTriggerKeydown = (e) => {
 			(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), this.show(e.key === "ArrowDown" ? "first" : "last"));
 		}, this.onMenuKeydown = (e) => {
@@ -90,8 +90,8 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
 	onPopoverClose(e) {
 		e.stopPropagation(), this.hide(e.detail?.reason === "escape");
 	}
-	choose(e, t) {
-		e.disabled ? t.preventDefault() : (!e.href || a(t)) && (this.hide(!this.inline), this.emit("lintje-action", e.value), e.href && this.followLink(e.href, t));
+	choose(t, n) {
+		t.disabled ? n.preventDefault() : (!t.href || e(n)) && (this.hide(!this.inline), this.emit("lintje-action", t.value), t.href && this.followLink(t.href, n));
 	}
 	logout() {
 		this.hide(!this.inline), this.emit("lintje-logout");
@@ -103,41 +103,41 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
 		}
 	}
 	renderRow(e) {
-		let t = this.inline ? r : "menuitem", n = this.inline ? r : "-1", i = o({
+		let t = this.inline ? i : "menuitem", n = this.inline ? i : "-1", r = c({
 			"lintje-menu__row": !0,
 			"focus-inset": !0,
 			"is-danger": !!e.danger,
 			"is-disabled": !!e.disabled
-		}), a = c`${e.icon ? s(e.icon, {
+		}), a = s`${e.icon ? l(e.icon, {
 			size: 16,
 			className: "lintje-menu__icon"
-		}) : r}<span class="lintje-menu__label">${e.label}</span>${e.hint ? c`<span class="lintje-menu__hint">${e.hint}</span>` : r}`;
-		if (e.href && !e.disabled) return c`<a
-        class=${i}
+		}) : i}<span class="lintje-menu__label">${e.label}</span>${e.hint ? s`<span class="lintje-menu__hint">${e.hint}</span>` : i}`;
+		if (e.href && !e.disabled) return s`<a
+        class=${r}
         role=${t}
         tabindex=${n}
         href=${e.href}
         @click=${(t) => this.choose(e, t)}
         >${a}</a
       >`;
-		let l = c`<button
+		let o = s`<button
       type="button"
-      class=${i}
+      class=${r}
       role=${t}
       tabindex=${n}
-      aria-disabled=${e.disabled ? "true" : r}
+      aria-disabled=${e.disabled ? "true" : i}
       @click=${(t) => this.choose(e, t)}
     >
       ${a}
     </button>`;
-		return e.disabled && e.reason ? c`<lintje-tooltip class="lintje-menu__tip" text=${e.reason}>${l}</lintje-tooltip>` : l;
+		return e.disabled && e.reason ? s`<lintje-tooltip class="lintje-menu__tip" text=${e.reason}>${o}</lintje-tooltip>` : o;
 	}
 	renderLogout() {
-		let e = this.inline ? r : "menuitem", t = this.inline ? r : "-1", n = s("functioneel-uitloggen", {
+		let e = this.inline ? i : "menuitem", t = this.inline ? i : "-1", n = l("functioneel-uitloggen", {
 			size: 16,
 			className: "lintje-menu__icon"
-		}), i = c`${n}<span class="lintje-menu__label">Afmelden</span>`;
-		return this.logoutAction ? c`<form class="lintje-user-menu__logout" method="post" action=${this.logoutAction}>
+		}), r = s`${n}<span class="lintje-menu__label">Afmelden</span>`;
+		return this.logoutAction ? s`<form class="lintje-user-menu__logout" method="post" action=${this.logoutAction}>
         <input type="hidden" name="csrf_token" .value=${this.csrf} />
         <button
           type="submit"
@@ -145,53 +145,53 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
           role=${e}
           tabindex=${t}
         >
-          ${i}
+          ${r}
         </button>
-      </form>` : c`<button
+      </form>` : s`<button
       type="button"
       class="lintje-menu__row lintje-user-menu__logout-row focus-inset"
       role=${e}
       tabindex=${t}
       @click=${() => this.logout()}
     >
-      ${i}
+      ${r}
     </button>`;
 	}
 	renderContent() {
 		let e = this.user;
-		return c`<div
-      class=${o({
+		return s`<div
+      class=${c({
 			"lintje-user-menu__panel": !0,
 			"is-inline": this.inline
 		})}
       @keydown=${this.onMenuKeydown}
     >
-      ${e ? c`<div class="lintje-user-menu__who">
-            ${this.inline ? c`<span class="lintje-user-menu__avatar" aria-hidden="true">${e.initials}</span>` : r}
+      ${e ? s`<div class="lintje-user-menu__who">
+            ${this.inline ? s`<span class="lintje-user-menu__avatar" aria-hidden="true">${e.initials}</span>` : i}
             <div class="lintje-user-menu__names">
               <p class="lintje-user-menu__name">${e.name}</p>
-              ${e.role ? c`<p class="lintje-user-menu__role">${e.role}</p>` : r}
+              ${e.role ? s`<p class="lintje-user-menu__role">${e.role}</p>` : i}
             </div>
-          </div>` : r}
+          </div>` : i}
       <div
         class="lintje-user-menu__menu"
         role=${this.inline ? "group" : "menu"}
         aria-label=${e ? `Menu van ${e.name}` : "Gebruikersmenu"}
       >
-        ${this.items.length ? c`<div class="lintje-user-menu__group">
+        ${this.items.length ? s`<div class="lintje-user-menu__group">
               ${f(this.items, "lintje-user-menu", (e) => this.renderRow(e))}
-            </div>` : r}
+            </div>` : i}
         <div class="lintje-user-menu__group lintje-user-menu__group--logout">${this.renderLogout()}</div>
       </div>
-      ${this.version ? c`<p class="lintje-user-menu__version">Versie ${this.version}</p>` : r}
+      ${this.version ? s`<p class="lintje-user-menu__version">Versie ${this.version}</p>` : i}
     </div>`;
 	}
 	render() {
 		if (this.inline) return this.renderContent();
 		let e = this.user;
-		return c`<button
+		return s`<button
         type="button"
-        class=${o({
+        class=${c({
 			"lintje-user-menu__trigger": !0,
 			"is-open": this.open
 		})}
@@ -203,7 +203,7 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
         @keydown=${this.onTriggerKeydown}
       >
         <span class="lintje-user-menu__avatar" aria-hidden="true">${e?.initials ?? ""}</span>
-        ${s("functioneel-delta-omlaag", {
+        ${l("functioneel-delta-omlaag", {
 			size: 16,
 			rotate: this.open ? 180 : void 0
 		})}
@@ -217,6 +217,6 @@ var m = "/*\n * The host is the avatar button's `--h-touch` box in the navigatio
       >`;
 	}
 };
-t("lintje-user-menu", g);
+n("lintje-user-menu", g);
 //#endregion
 export { g as LintjeUserMenu };