lintje 0.2.0 → 0.4.0

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

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

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

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

package/dist-elements/tag/tooltip.js

@@ -1 +1 @@
-export { M as LintjeTooltip, N as TOOLTIP_DELAY, P as TOOLTIP_LINGER } from "../chunks/base-Bg-IFOPG.js";
+export { R as LintjeTooltip, z as TOOLTIP_DELAY, B as TOOLTIP_LINGER } from "../chunks/base-DRGvkF-r.js";

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-DRGvkF-r.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-DRGvkF-r.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-DRGvkF-r.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() {