lintje 0.2.0 → 0.3.0

package/dist-elements/tag/chat-answer.js

@@ -1,5 +1,5 @@
-import { Bt as e, Gt as t, Ht as n, U as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
-import { n as o } from "../chunks/focus-trap-9BnE-xWv.js";
+import { Jt as e, Q as t, Yt as n, Zt as r, en as i, nn as a } from "../chunks/base-CbmWxUig.js";
+import { n as o } from "../chunks/focus-trap-BwOxE5BX.js";
 import { t as s } from "../chunks/copied-7BXYVkXT.js";
 import "./announcement.js";
 import "./prose.js";
@@ -10,7 +10,7 @@ import "./chart.js";
 import "./chat-strip.js";
 import "./chat-suggestions.js";
 //#region src/components/chat/chat-answer/chat-answer.css?inline
-var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-chat-answer { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }\n.lintje-chat-answer__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n\n.lintje-chat-answer__lead { font-weight: 700; }\n\n/* The dashboard's 12-column grid, so two tiles with a `span` stand side by side. */\n.lintje-chat-answer__blocks {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--space-3) var(--grid-gutter);\n  min-width: 0;\n}\n.lintje-chat-answer__blocks > :not([span]) { grid-column: 1 / -1; }\n@media (max-width: 767px) {\n  .lintje-chat-answer__blocks { grid-template-columns: minmax(0, 1fr); }\n}\n\n.lintje-chat-answer__stopped,\n.lintje-chat-answer__note,\n.lintje-chat-answer__reasons-label { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-chat-answer__status { align-self: flex-start; }\n.lintje-chat-answer__retry { margin-top: var(--space-2); }\n\n/* The gap keeps the hit areas apart; the margin aligns the first glyph with the text's edge. */\n.lintje-chat-answer__actions {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2);\n  margin-left: calc((16px - var(--h-icon-button)) / 2);\n  color: var(--color-text-primary);\n}\n.lintje-chat-answer__note { margin-left: var(--space-2); }\n.lintje-chat-answer__reasons {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2);\n  animation: lintje-fade-in var(--dur-base) var(--ease-in-motion) both;\n}\n.lintje-chat-answer__reasons-label { margin-right: var(--space-1); }\n", u = [
+var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-chat-answer { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }\n.lintje-chat-answer__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n\n.lintje-chat-answer__lead { font-weight: 700; }\n\n/* The dashboard's 12-column grid, so two tiles with a `span` stand side by side. */\n.lintje-chat-answer__blocks {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--space-3) var(--grid-gutter);\n  min-width: 0;\n}\n.lintje-chat-answer__blocks > :not([span]) { grid-column: 1 / -1; }\n@media screen and (max-width: 767px) {\n  .lintje-chat-answer__blocks { grid-template-columns: minmax(0, 1fr); }\n}\n\n.lintje-chat-answer__stopped,\n.lintje-chat-answer__note,\n.lintje-chat-answer__reasons-label { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-chat-answer__status { align-self: flex-start; }\n.lintje-chat-answer__retry { margin-top: var(--space-2); }\n\n/* The gap keeps the hit areas apart; the margin aligns the first glyph with the text's edge. */\n.lintje-chat-answer__actions {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2);\n  margin-left: calc((16px - var(--h-icon-button)) / 2);\n  color: var(--color-text-primary);\n}\n.lintje-chat-answer__note { margin-left: var(--space-2); }\n.lintje-chat-answer__reasons {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2);\n  animation: lintje-fade-in var(--dur-base) var(--ease-in-motion) both;\n}\n.lintje-chat-answer__reasons-label { margin-right: var(--space-1); }\n", u = [
 	"Klopt niet",
 	"Niet wat ik vroeg",
 	"Onduidelijk"
@@ -23,12 +23,12 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
 		label: "Kies wat je wilt doen",
 		hint: "Of stel een andere vraag in het veld."
 	}
-}, f = class extends a {
+}, f = class extends e {
 	constructor(...e) {
 		super(...e), this.state = "ready", this.current = !1, this.rating = null, this.reasonGiven = !1, this.note = "", this.spoken = [], this.#e = !1, this.#t = 0, this.#n = "";
 	}
 	static {
-		this.styles = n(l);
+		this.styles = r(l);
 	}
 	static {
 		this.properties = {
@@ -101,8 +101,8 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
 		});
 	}
 	giveReason(e) {
-		let t = this.renderRoot.querySelector(".lintje-chat-answer__reasons"), n = this.renderRoot.querySelector("[label=\"Slecht antwoord\"]");
-		t && n && r(t) && o(n).focus(), this.reasonGiven = !0, this.say("Bedankt, doorgegeven."), this.emit("lintje-answer-rate", {
+		let n = this.renderRoot.querySelector(".lintje-chat-answer__reasons"), r = this.renderRoot.querySelector("[label=\"Slecht antwoord\"]");
+		n && r && t(n) && o(r).focus(), this.reasonGiven = !0, this.say("Bedankt, doorgegeven."), this.emit("lintje-answer-rate", {
 			...this.detail,
 			rating: "down",
 			reason: e
@@ -112,50 +112,50 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
 		this.emit("lintje-answer-retry", this.detail);
 	}
 	render() {
-		let e = this.state, n = e === "ready", r = d[e];
-		return i`<article class="lintje-chat-answer">
+		let e = this.state, t = e === "ready", n = d[e];
+		return a`<article class="lintje-chat-answer">
       <div class="lintje-chat-answer__body">
         ${e === "error" ? this.renderError() : this.renderText()}
         <div class="visually-hidden" role="status" aria-atomic="false">
-          ${this.spoken.map((e) => i`<p>${e}</p>`)}
+          ${this.spoken.map((e) => a`<p>${e}</p>`)}
         </div>
-        ${n && this.strip ? i`<lintje-chat-strip
-              turn-id=${this.turnId ?? t}
+        ${t && this.strip ? a`<lintje-chat-strip
+              turn-id=${this.turnId ?? i}
               .items=${this.strip.items}
               .details=${this.strip.details}
-              details-label=${this.strip.detailsLabel ?? t}
+              details-label=${this.strip.detailsLabel ?? i}
               ?disabled=${!this.current}
-            ></lintje-chat-strip>` : t}
+            ></lintje-chat-strip>` : i}
         ${this.renderBlocks()}
-        ${e === "streaming" ? i`<lintje-spinner
+        ${e === "streaming" ? a`<lintje-spinner
               class="lintje-chat-answer__status"
               label=${this.status ?? "Antwoord schrijven"}
-            ></lintje-spinner>` : t}
-        ${e === "stopped" ? i`<p class="lintje-chat-answer__stopped">Antwoord gestopt.</p>` : t}
-        ${n ? this.renderActions() : t}
+            ></lintje-spinner>` : i}
+        ${e === "stopped" ? a`<p class="lintje-chat-answer__stopped">Antwoord gestopt.</p>` : i}
+        ${t ? this.renderActions() : i}
       </div>
-      ${r && this.current ? i`<lintje-chat-suggestions
+      ${n && this.current ? a`<lintje-chat-suggestions
             kind="choice"
-            turn-id=${this.turnId ?? t}
-            label=${r.label}
-            hint=${r.hint}
+            turn-id=${this.turnId ?? i}
+            label=${n.label}
+            hint=${n.hint}
             .items=${this.choices}
-          ></lintje-chat-suggestions>` : t}
-      ${n && this.current ? i`<lintje-chat-suggestions
-            turn-id=${this.turnId ?? t}
+          ></lintje-chat-suggestions>` : i}
+      ${t && this.current ? a`<lintje-chat-suggestions
+            turn-id=${this.turnId ?? i}
             label="Jij, als vervolgvraag"
             .items=${this.followUps}
-          ></lintje-chat-suggestions>` : t}
+          ></lintje-chat-suggestions>` : i}
     </article>`;
 	}
 	renderText() {
-		return i`<lintje-prose
+		return a`<lintje-prose
       class="lintje-chat-answer__text"
-      aria-live=${this.#e ? "off" : t}
-      aria-busy=${this.state === "streaming" ? "true" : t}
+      aria-live=${this.#e ? "off" : i}
+      aria-busy=${this.state === "streaming" ? "true" : i}
     >
       <p>
-        <span class="visually-hidden">Assistent: </span>${this.lead ? i`<strong class="lintje-chat-answer__lead">${this.lead}</strong> ` : t}${this.text ?? t}
+        <span class="visually-hidden">Assistent: </span>${this.lead ? a`<strong class="lintje-chat-answer__lead">${this.lead}</strong> ` : i}${this.text ?? i}
       </p>
     </lintje-prose>`;
 	}
@@ -166,43 +166,43 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
 			title: this.error?.title ?? "Het antwoord is niet geladen",
 			text: this.error?.text ?? "Je vraag staat er nog: probeer het opnieuw, of stel een kortere vraag."
 		};
-		return i`<span class="visually-hidden">Assistent: </span>
+		return a`<span class="visually-hidden">Assistent: </span>
       <lintje-announcement .data=${e}>
-        ${this.current ? i`<lintje-button
+        ${this.current ? a`<lintje-button
               class="lintje-chat-answer__retry"
               slot="action"
               variant="secondary"
               icon="functioneel-refresh"
               @click=${() => this.retry()}
               >Opnieuw proberen</lintje-button
-            >` : t}
+            >` : i}
       </lintje-announcement>`;
 	}
 	renderBlocks() {
 		let e = this.blocks ?? [];
-		return e.length ? i`<div
+		return e.length ? a`<div
       class="lintje-chat-answer__blocks"
-      aria-busy=${this.state === "streaming" ? "true" : t}
+      aria-busy=${this.state === "streaming" ? "true" : i}
     >
       ${e.map((e) => {
 			switch (e.kind) {
-				case "prose": return i`<lintje-prose .html=${e.html} .text=${e.text}></lintje-prose>`;
-				case "kpi-row": return i`<lintje-kpi-row .data=${e.data}></lintje-kpi-row>`;
-				case "chart": return i`<lintje-chart
-              span=${e.data.span ?? t}
+				case "prose": return a`<lintje-prose .html=${e.html} .text=${e.text}></lintje-prose>`;
+				case "kpi-row": return a`<lintje-kpi-row .data=${e.data}></lintje-kpi-row>`;
+				case "chart": return a`<lintje-chart
+              span=${e.data.span ?? i}
               .data=${e.data}
             ></lintje-chart>`;
-				case "data-table": return i`<lintje-data-table
-              span=${e.data.span ?? t}
+				case "data-table": return a`<lintje-data-table
+              span=${e.data.span ?? i}
               .data=${e.data}
             ></lintje-data-table>`;
 			}
 		})}
-    </div>` : t;
+    </div>` : i;
 	}
 	renderActions() {
 		let e = this.rating === "down" && !this.reasonGiven;
-		return i`<div class="lintje-chat-answer__actions">
+		return a`<div class="lintje-chat-answer__actions">
         <lintje-icon-button
           icon="functioneel-kopieren"
           label="Antwoord kopiëren"
@@ -225,29 +225,29 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
           ?active=${this.rating === "down"}
           @click=${() => this.rate("down")}
         ></lintje-icon-button>
-        ${this.current ? i`<lintje-icon-button
+        ${this.current ? a`<lintje-icon-button
               icon="functioneel-refresh"
               label="Opnieuw beantwoorden"
               variant="flat"
                   @click=${() => this.retry()}
-            ></lintje-icon-button>` : t}
+            ></lintje-icon-button>` : i}
         <span class="lintje-chat-answer__note" role="status">${this.note}</span>
       </div>
-      ${e ? i`<div
+      ${e ? a`<div
             class="lintje-chat-answer__reasons"
             role="group"
             aria-labelledby="reasons"
           >
             <span id="reasons" class="lintje-chat-answer__reasons-label">Wat was er mis?</span>
-            ${u.map((e) => i`<lintje-button
+            ${u.map((e) => a`<lintje-button
                 variant="tertiary"
                 size="compact"
                 @click=${() => this.giveReason(e)}
                 >${e}</lintje-button
               >`)}
-          </div>` : t}`;
+          </div>` : i}`;
 	}
 };
-e("lintje-chat-answer", f);
+n("lintje-chat-answer", f);
 //#endregion
 export { f as LintjeChatAnswer };

package/dist-elements/tag/chat-composer.js

@@ -1,9 +1,9 @@
-import { Bt as e, Gt as t, Ht as n, Lt as r, U as i, Z as a, qt as o, ut as s, zt as c } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Kt as t, Q as n, Yt as r, Zt as i, bt as a, en as o, nn as s, nt as c, st as l } from "../chunks/base-CbmWxUig.js";
 import "./radio-group.js";
-import { t as l } from "../chunks/key-CuuOw1KE.js";
+import { t as u } from "../chunks/key-CuuOw1KE.js";
 import "./multiselect.js";
 //#region src/components/chat/shared/chat-terms.ts
-function u(e, t = []) {
+function d(e, t = []) {
 	let n = [], r = 0;
 	for (let i of [...t].sort((e, t) => e.start - t.start)) i.start < r || i.end <= i.start || i.end > e.length || (i.start > r && n.push({ text: e.slice(r, i.start) }), n.push({
 		text: e.slice(i.start, i.end),
@@ -11,8 +11,8 @@ function u(e, t = []) {
 	}), r = i.end);
 	return r < e.length && n.push({ text: e.slice(r) }), n;
 }
-var d = /[\p{L}\p{N}]/u;
-function f(e, t = [], n) {
+var f = /[\p{L}\p{N}]/u;
+function p(e, t = [], n) {
 	let r = e.toLowerCase(), i = t.flatMap((e) => [e.label, ...e.aliases ?? []].map((t) => ({
 		word: t,
 		term: e
@@ -21,7 +21,7 @@ function f(e, t = [], n) {
 		let i = t.toLowerCase();
 		for (let t = r.indexOf(i); t !== -1; t = r.indexOf(i, t + 1)) {
 			let r = t + i.length;
-			if (t > 0 && d.test(e[t - 1]) || r < e.length && d.test(e[r]) || a.some((e) => t < e.end && r > e.start)) continue;
+			if (t > 0 && f.test(e[t - 1]) || r < e.length && f.test(e[r]) || a.some((e) => t < e.end && r > e.start)) continue;
 			let s = o.source !== void 0 && n !== void 0 && !n.includes(o.source);
 			a.push({
 				start: t,
@@ -33,10 +33,10 @@ function f(e, t = [], n) {
 	}
 	return a.sort((e, t) => e.start - t.start);
 }
-function p(e, t = e.length) {
+function m(e, t = e.length) {
 	return /\S*$/.exec(e.slice(0, t))?.[0] ?? "";
 }
-function m(e, t = []) {
+function h(e, t = []) {
 	let n = e.toLowerCase();
 	return n ? t.filter((e) => {
 		let t = e.label.toLowerCase();
@@ -45,7 +45,7 @@ function m(e, t = []) {
 }
 //#endregion
 //#region src/components/chat/chat-composer/chat-composer.css?inline
-var h = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-chat-composer { position: relative; }\n\n/* The frame is the field, so it takes the field's resting border (3:1). */\n.lintje-chat-composer__frame {\n  display: flex; flex-direction: column;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-field);\n}\n\n/* Grows with the text and scrolls at four lines, the captions with it. A line this tall leaves\n   a term's caption room above the word. */\n.lintje-chat-composer__field {\n  position: relative;\n  max-height: calc(var(--h-control) * 4 + var(--space-5));\n  overflow-y: auto;\n}\n.lintje-chat-composer__input {\n  display: block;\n  min-height: calc(var(--h-control) + var(--space-5));\n  padding: var(--space-3) var(--space-4) var(--space-2);\n  font: var(--text-body);\n  line-height: var(--h-control);\n  color: var(--color-text-primary);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.lintje-chat-composer__input.is-empty::before {\n  /* The field's `aria-placeholder` says it; the empty alternative keeps it from being read twice. */\n  content: attr(data-placeholder);\n  content: attr(data-placeholder) / '';\n  position: absolute;\n  color: var(--color-text-placeholder);\n  opacity: 1;\n  pointer-events: none;\n}\n/* The frame takes the ring; without `:has()` the field keeps its own. */\n@supports selector(:has(*)) {\n  .lintje-chat-composer__input:focus-visible { outline: none; }\n  .lintje-chat-composer__frame:has(.lintje-chat-composer__input:focus-visible) {\n    outline: var(--focus-width) solid var(--color-focus);\n    outline-offset: var(--focus-offset);\n  }\n}\n\n/* Dashed gray marks an uncertain term: ambiguous, or of a source that is switched off. */\n.lintje-chat-composer__input::highlight(lintje-term) {\n  background-color: var(--color-term-bg);\n  text-decoration: underline solid var(--color-term-line);\n  text-decoration-thickness: 2px;\n  text-underline-offset: var(--space-1);\n}\n.lintje-chat-composer__input::highlight(lintje-term-uncertain) {\n  text-decoration: underline dashed var(--color-border-suggestion);\n  text-decoration-thickness: 2px;\n  text-underline-offset: var(--space-1);\n}\n\n.lintje-chat-composer__captions { position: absolute; inset: 0; pointer-events: none; }\n.lintje-chat-composer__caption {\n  position: absolute;\n  transform: translateY(-100%);\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  line-height: 1;\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis;\n  color: var(--color-accent-text);\n}\n.lintje-chat-composer__caption.is-uncertain { color: var(--color-text-muted); }\n\n.lintje-chat-composer__bar {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;\n  gap: var(--space-2);\n  padding: var(--space-2);\n}\n.lintje-chat-composer__sources { flex: 0 1 auto; width: auto; min-width: 0; }\n.lintje-chat-composer__hint {\n  flex: 1 1 auto; min-width: 0;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n  text-align: right;\n}\n\n/* A joined group is drawn at the target height itself, so both halves are as tall as \"Versturen\". */\n.lintje-chat-composer__send { position: relative; flex: none; display: flex; gap: 1px; }\n.lintje-chat-composer__send-half { --h-icon-button: var(--h-button); }\n\n.lintje-chat-composer__scrim { position: fixed; inset: 0; z-index: 45; }\n.lintje-chat-composer__options {\n  position: absolute; right: 0; bottom: calc(100% + var(--space-2)); z-index: 46;\n  width: 320px; max-width: calc(100vw - 2 * var(--space-4));\n  display: flex; flex-direction: column; gap: var(--space-4);\n  padding: var(--space-4);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  color: var(--color-text-primary);\n  animation: lintje-rise var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-chat-composer__shortcuts { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-chat-composer__shortcuts-label { font: var(--text-small); font-weight: 700; }\n.lintje-chat-composer__keys {\n  display: grid; grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n  margin: 0;\n  font: var(--text-ui);\n}\n.lintje-chat-composer__key { margin: 0; }\n\n.lintje-chat-composer__completions {\n  position: absolute; left: 0; bottom: calc(100% + var(--space-2)); z-index: 46;\n  width: 360px; max-width: 100%;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-chat-composer__completion {\n  display: flex; align-items: center; justify-content: space-between;\n  gap: var(--space-3);\n  min-height: var(--h-option);\n  padding: 0 var(--space-3);\n  border-bottom: 1px solid var(--color-border-default);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  cursor: pointer;\n}\n.lintje-chat-composer__completion:last-child { border-bottom: 0; }\n.lintje-chat-composer__completion:hover,\n.lintje-chat-composer__completion.is-active { background: var(--color-bg-subtle); }\n.lintje-chat-composer__completion-kind { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* A phone: the field stays at 1rem, since a smaller size makes iOS zoom in on focus. */\n@media (max-width: 767px) {\n  .lintje-chat-composer__input { padding: var(--space-3) var(--space-3) var(--space-1); }\n  .lintje-chat-composer__hint:not(:empty) { flex-basis: 100%; order: -1; text-align: left; }\n}\n\n/* Forced colours drop the chosen completion's fill, so it takes an outline. */\n@media (forced-colors: active) {\n  .lintje-chat-composer__completion.is-active { outline: 1px solid Highlight; outline-offset: -1px; }\n}\n", g = [
+var g = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-chat-composer { position: relative; }\n\n/* The frame is the field, so it takes the field's resting border (3:1). */\n.lintje-chat-composer__frame {\n  display: flex; flex-direction: column;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-field);\n}\n\n/* Grows with the text and scrolls at four lines, the captions with it. A line this tall leaves\n   a term's caption room above the word. */\n.lintje-chat-composer__field {\n  position: relative;\n  max-height: calc(var(--h-control) * 4 + var(--space-5));\n  overflow-y: auto;\n}\n.lintje-chat-composer__input {\n  display: block;\n  min-height: calc(var(--h-control) + var(--space-5));\n  padding: var(--space-3) var(--space-4) var(--space-2);\n  font: var(--text-body);\n  line-height: var(--h-control);\n  color: var(--color-text-primary);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.lintje-chat-composer__input.is-empty::before {\n  /* The field's `aria-placeholder` says it; the empty alternative keeps it from being read twice. */\n  content: attr(data-placeholder);\n  content: attr(data-placeholder) / '';\n  position: absolute;\n  color: var(--color-text-placeholder);\n  opacity: 1;\n  pointer-events: none;\n}\n/* The frame takes the ring; without `:has()` the field keeps its own. */\n@supports selector(:has(*)) {\n  .lintje-chat-composer__input:focus-visible { outline: none; }\n  .lintje-chat-composer__frame:has(.lintje-chat-composer__input:focus-visible) {\n    outline: var(--focus-width) solid var(--color-focus);\n    outline-offset: var(--focus-offset);\n  }\n}\n\n/* Dashed gray marks an uncertain term: ambiguous, or of a source that is switched off. */\n.lintje-chat-composer__input::highlight(lintje-term) {\n  background-color: var(--color-term-bg);\n  text-decoration: underline solid var(--color-term-line);\n  text-decoration-thickness: 2px;\n  text-underline-offset: var(--space-1);\n}\n.lintje-chat-composer__input::highlight(lintje-term-uncertain) {\n  text-decoration: underline dashed var(--color-border-suggestion);\n  text-decoration-thickness: 2px;\n  text-underline-offset: var(--space-1);\n}\n\n.lintje-chat-composer__captions { position: absolute; inset: 0; pointer-events: none; }\n.lintje-chat-composer__caption {\n  position: absolute;\n  transform: translateY(-100%);\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  line-height: 1;\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis;\n  color: var(--color-accent-text);\n}\n.lintje-chat-composer__caption.is-uncertain { color: var(--color-text-muted); }\n\n.lintje-chat-composer__bar {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;\n  gap: var(--space-2);\n  padding: var(--space-2);\n}\n.lintje-chat-composer__sources { flex: 0 1 auto; width: auto; min-width: 0; }\n.lintje-chat-composer__hint {\n  flex: 1 1 auto; min-width: 0;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n  text-align: right;\n}\n\n/* A joined group is drawn at the target height itself, so both halves are as tall as \"Versturen\". */\n.lintje-chat-composer__send { position: relative; flex: none; display: flex; gap: 1px; }\n.lintje-chat-composer__send-half { --h-icon-button: var(--h-button); }\n\n.lintje-chat-composer__scrim { position: fixed; inset: 0; z-index: 45; }\n.lintje-chat-composer__options {\n  position: absolute; right: 0; bottom: calc(100% + var(--space-2)); z-index: 46;\n  width: 320px; max-width: calc(100vw - 2 * var(--space-4));\n  display: flex; flex-direction: column; gap: var(--space-4);\n  padding: var(--space-4);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  color: var(--color-text-primary);\n  animation: lintje-rise var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-chat-composer__shortcuts { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-chat-composer__shortcuts-label { font: var(--text-small); font-weight: 700; }\n.lintje-chat-composer__keys {\n  display: grid; grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n  margin: 0;\n  font: var(--text-ui);\n}\n.lintje-chat-composer__key { margin: 0; }\n\n.lintje-chat-composer__completions {\n  position: absolute; left: 0; bottom: calc(100% + var(--space-2)); z-index: 46;\n  width: 360px; max-width: 100%;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-chat-composer__completion {\n  display: flex; align-items: center; justify-content: space-between;\n  gap: var(--space-3);\n  min-height: var(--h-option);\n  padding: 0 var(--space-3);\n  border-bottom: 1px solid var(--color-border-default);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  cursor: pointer;\n}\n.lintje-chat-composer__completion:last-child { border-bottom: 0; }\n.lintje-chat-composer__completion:hover,\n.lintje-chat-composer__completion.is-active { background: var(--color-bg-subtle); }\n.lintje-chat-composer__completion-kind { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* A phone: the field stays at 1rem, since a smaller size makes iOS zoom in on focus. */\n@media screen and (max-width: 767px) {\n  .lintje-chat-composer__input { padding: var(--space-3) var(--space-3) var(--space-1); }\n  .lintje-chat-composer__hint:not(:empty) { flex-basis: 100%; order: -1; text-align: left; }\n}\n\n/* Forced colours drop the chosen completion's fill, so it takes an outline. */\n@media (forced-colors: active) {\n  .lintje-chat-composer__completion.is-active { outline: 1px solid Highlight; outline-offset: -1px; }\n}\n", _ = [
 	{
 		value: "auto",
 		label: "Automatisch (de assistent kiest)"
@@ -62,29 +62,29 @@ var h = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
 		value: "table",
 		label: "Als tabel"
 	}
-], _ = [{
+], v = [{
 	value: "enter",
 	label: "Enter (Shift+Enter: nieuwe regel)"
 }, {
 	value: "ctrl-enter",
 	label: "Ctrl+Enter (Enter: nieuwe regel)"
-}], v = "lintje-chat-send-key", y = {
+}], y = "lintje-chat-send-key", b = {
 	enter: "Enter verstuurt, Shift+Enter begint een nieuwe regel.",
 	"ctrl-enter": "Ctrl+Enter verstuurt, Enter begint een nieuwe regel."
 };
-function b() {
+function x() {
 	try {
-		return localStorage.getItem(v) === "ctrl-enter" ? "ctrl-enter" : "enter";
+		return localStorage.getItem(y) === "ctrl-enter" ? "ctrl-enter" : "enter";
 	} catch {
 		return "enter";
 	}
 }
-var x = "lintje-term", S = "lintje-term-uncertain", C = () => typeof CSS < "u" && "highlights" in CSS && typeof Highlight < "u";
-function w(e) {
+var S = "lintje-term", C = "lintje-term-uncertain", w = () => typeof CSS < "u" && "highlights" in CSS && typeof Highlight < "u";
+function T(e) {
 	let t = CSS.highlights.get(e);
 	return t || (t = new Highlight(), CSS.highlights.set(e, t)), t;
 }
-function T(e) {
+function E(e) {
 	let t = [], n = "", r = document.createTreeWalker(e, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
 	for (let e = r.nextNode(); e; e = r.nextNode()) e.nodeType === Node.TEXT_NODE ? (t.push({
 		node: e,
@@ -95,7 +95,7 @@ function T(e) {
 		nodes: t
 	};
 }
-function E(e, t) {
+function D(e, t) {
 	for (let n = e.nodes.length - 1; n >= 0; n--) {
 		let { node: r, start: i } = e.nodes[n];
 		if (t >= i && t <= i + r.data.length) return {
@@ -105,12 +105,16 @@ function E(e, t) {
 	}
 	return null;
 }
-var D = class extends c {
+var O = class extends e {
 	constructor(...e) {
-		super(...e), this.variant = "ask", this.text = "", this.placeholder = "Stel een vraag over de gegevens", this.busy = !1, this.sendKey = b(), this.form = "auto", this.optionsOpen = !1, this.plain = !1, this.draft = "", this.caret = 0, this.completionIndex = 0, this.completionOff = !1, this.captions = [], this.#e = new r(this), this.#t = !0, this.#n = [], this.#r = null, this.#a = !1;
+		super(...e), this.variant = "ask", this.text = "", this.placeholder = "Stel een vraag over de gegevens", this.busy = !1, this.sendKey = x(), this.form = "auto", this.optionsOpen = !1, this.plain = !1, this.draft = "", this.caret = 0, this.completionIndex = 0, this.completionOff = !1, this.captions = [], this.#e = new t(this), this.#t = !0, this.#n = [], this.#r = null, this.#a = !1;
 	}
 	static {
-		this.styles = [n(l), n(h)];
+		this.styles = [
+			i(u),
+			i(g),
+			i(c)
+		];
 	}
 	static {
 		this.properties = {
@@ -165,10 +169,10 @@ var D = class extends c {
 		return this.variant === "ask" && !!this.sources?.length && !this.selectedIds.length;
 	}
 	termsIn(e) {
-		return this.draftTerms && this.draftTerms.text === e ? this.draftTerms.ranges : f(e, this.vocabulary, this.sources ? this.selectedIds : void 0);
+		return this.draftTerms && this.draftTerms.text === e ? this.draftTerms.ranges : p(e, this.vocabulary, this.sources ? this.selectedIds : void 0);
 	}
 	get suggestions() {
-		return this.completionOff || this.termsIn(this.draft).some((e) => e.end === this.caret) ? [] : m(p(this.draft, this.caret), this.vocabulary);
+		return this.completionOff || this.termsIn(this.draft).some((e) => e.end === this.caret) ? [] : h(m(this.draft, this.caret), this.vocabulary);
 	}
 	disconnectedCallback() {
 		this.clearHighlights(), this.#r?.disconnect(), this.#r = null, clearTimeout(this.#i), super.disconnectedCallback();
@@ -180,7 +184,7 @@ var D = class extends c {
 	willUpdate(e) {
 		if (super.willUpdate(e), !e.has("busy") || e.get("busy") === void 0) return;
 		let t = this.renderRoot.querySelector(this.busy ? ".lintje-chat-composer__send" : ".lintje-chat-composer__stop");
-		t && i(t) && (this.#a = !0);
+		t && n(t) && (this.#a = !0);
 	}
 	updated(e) {
 		e.has("text") && this.text !== this.draft && this.write(this.text, void 0, !1), this.paint(), this.#a && (this.#a = !1, this.focus());
@@ -198,7 +202,7 @@ var D = class extends c {
 	read() {
 		let e = this.input;
 		if (!e) return;
-		let t = T(e);
+		let t = E(e);
 		t.text === "\n" && (e.textContent = "", t.text = "");
 		let n = this.selection(), r = t.nodes.find(({ node: e }) => e === n?.focusNode);
 		this.draft = t.text, this.caret = r ? r.start + (n?.focusOffset ?? 0) : t.text.length;
@@ -206,9 +210,9 @@ var D = class extends c {
 	write(e, t = e.length, n = !0) {
 		let r = this.input;
 		if (r) {
-			if (T(r).text !== e && (r.textContent = e), n) {
+			if (E(r).text !== e && (r.textContent = e), n) {
 				r.focus();
-				let e = E(T(r), t);
+				let e = D(E(r), t);
 				e && this.selection()?.collapse(e.node, e.offset);
 			}
 			this.draft = e, this.caret = t;
@@ -234,7 +238,7 @@ var D = class extends c {
 		} else t.length && (e.key === "Enter" || e.key === "Tab") && !e.isComposing ? (e.preventDefault(), this.complete(t[Math.min(this.completionIndex, t.length - 1)])) : t.length && e.key === "Escape" ? (e.preventDefault(), this.completionOff = !0) : this.sends(e) ? (e.preventDefault(), this.send()) : e.key === "Enter" && !this.#t && !e.isComposing ? (e.preventDefault(), document.execCommand("insertLineBreak")) : e.key === "Escape" ? this.variant === "edit" ? this.emitLocal("lintje-cancel") : this.busy && this.emit("lintje-answer-stop", {}) : e.key === "ArrowUp" && this.draft === "" && this.recall && (e.preventDefault(), this.write(this.recall));
 	}
 	complete(e) {
-		let t = p(this.draft, this.caret), n = this.caret - t.length, r = `${this.draft.slice(0, n)}${e.label} ${this.draft.slice(this.caret)}`;
+		let t = m(this.draft, this.caret), n = this.caret - t.length, r = `${this.draft.slice(0, n)}${e.label} ${this.draft.slice(this.caret)}`;
 		this.write(r, n + e.label.length + 1), this.completionOff = !0;
 	}
 	send() {
@@ -260,23 +264,23 @@ var D = class extends c {
 		})).filter((t) => t.start >= 0 && t.end <= e.length);
 	}
 	clearHighlights() {
-		if (C()) {
-			for (let { name: e, range: t } of this.#n) w(e).delete(t);
+		if (w()) {
+			for (let { name: e, range: t } of this.#n) T(e).delete(t);
 			this.#n = [];
 		}
 	}
 	paint() {
 		let e = this.input, t = this.renderRoot.querySelector(".lintje-chat-composer__field");
-		if (!e || !t || !C()) return;
+		if (!e || !t || !w()) return;
 		this.clearHighlights();
-		let n = T(e), r = t.getBoundingClientRect(), i = [];
+		let n = E(e), r = t.getBoundingClientRect(), i = [];
 		for (let e of this.termsIn(n.text)) {
-			let a = E(n, e.start), o = E(n, e.end);
+			let a = D(n, e.start), o = D(n, e.end);
 			if (!a || !o) continue;
 			let s = new Range();
 			s.setStart(a.node, a.offset), s.setEnd(o.node, o.offset);
-			let c = e.certain === !1 ? S : x;
-			w(c).add(s), this.#n.push({
+			let c = e.certain === !1 ? C : S;
+			T(c).add(s), this.#n.push({
 				name: c,
 				range: s
 			});
@@ -296,7 +300,7 @@ var D = class extends c {
 	setSendKey(e) {
 		this.sendKey = e;
 		try {
-			localStorage.setItem(v, e);
+			localStorage.setItem(y, e);
 		} catch {}
 	}
 	async toggleOptions(e) {
@@ -305,25 +309,25 @@ var D = class extends c {
 		(t?.shadowRoot?.querySelector("button") ?? t)?.focus();
 	}
 	render() {
-		let e = this.suggestions, n = Math.min(this.completionIndex, e.length - 1), r = this.termsIn(this.draft).map((e) => {
+		let e = this.suggestions, t = Math.min(this.completionIndex, e.length - 1), n = this.termsIn(this.draft).map((e) => {
 			let t = this.draft.slice(e.start, e.end), n = [e.kind, e.certain === !1 ? "niet zeker" : ""].filter(Boolean);
 			return n.length ? `${t} (${n.join(", ")})` : t;
 		}).join(", ");
-		return o`<div class="lintje-chat-composer lintje-chat-composer--${this.variant}">
-      ${e.length ? o`<div
+		return s`<div class="lintje-chat-composer lintje-chat-composer--${this.variant}">
+      ${e.length ? s`<div
             id="completions"
             class="lintje-chat-composer__completions"
             role="listbox"
             aria-label="Aanvullen"
           >
-            ${e.map((e, t) => o`<div
-                id="completion-${t}"
-                class=${a({
+            ${e.map((e, n) => s`<div
+                id="completion-${n}"
+                class=${l({
 			"lintje-chat-composer__completion": !0,
-			"is-active": t === n
+			"is-active": n === t
 		})}
                 role="option"
-                aria-selected=${String(t === n)}
+                aria-selected=${String(n === t)}
                 @mousedown=${(t) => {
 			t.preventDefault(), this.complete(e);
 		}}
@@ -331,11 +335,11 @@ var D = class extends c {
                 <span>${e.label}</span>
                 <span class="lintje-chat-composer__completion-kind">${e.kind}</span>
               </div>`)}
-          </div>` : t}
+          </div>` : o}
       <div class="lintje-chat-composer__frame">
         <div class="lintje-chat-composer__field">
           <div
-            class=${a({
+            class=${l({
 			"lintje-chat-composer__input": !0,
 			"is-empty": this.draft === ""
 		})}
@@ -345,9 +349,9 @@ var D = class extends c {
             aria-label=${this.variant === "edit" ? "Je vraag bewerken" : "Je vraag"}
             aria-describedby="hint send-key"
             aria-placeholder=${this.placeholder}
-            aria-autocomplete=${this.vocabulary?.length ? "list" : t}
-            aria-controls=${e.length ? "completions" : t}
-            aria-activedescendant=${e.length ? `completion-${n}` : t}
+            aria-autocomplete=${this.vocabulary?.length ? "list" : o}
+            aria-controls=${e.length ? "completions" : o}
+            aria-activedescendant=${e.length ? `completion-${t}` : o}
             data-placeholder=${this.placeholder}
             @input=${this.onInput}
             @keydown=${this.onKeydown}
@@ -356,12 +360,12 @@ var D = class extends c {
             @paste=${this.onPaste}
           ></div>
           <div class="lintje-chat-composer__captions" aria-hidden="true">
-            ${this.captions.map((e) => o`<span
-                class=${a({
+            ${this.captions.map((e) => s`<span
+                class=${l({
 			"lintje-chat-composer__caption": !0,
 			"is-uncertain": !e.certain
 		})}
-                ${s({
+                ${a({
 			left: `${e.left}px`,
 			top: `${e.top}px`,
 			maxWidth: e.room === void 0 ? null : `${e.room}px`
@@ -371,9 +375,9 @@ var D = class extends c {
           </div>
         </div>
         <span id="send-key" class="visually-hidden"
-          >${y[this.plain ? "enter" : this.sendKey]}</span
+          >${b[this.plain ? "enter" : this.sendKey]}</span
         >
-        <span class="visually-hidden" aria-live="polite">${r ? `Herkend: ${r}` : ""}</span>
+        <span class="visually-hidden" aria-live="polite">${n ? `Herkend: ${n}` : ""}</span>
         <div class="lintje-chat-composer__bar">
           ${this.variant === "edit" ? this.renderEdit() : this.renderAsk()}
         </div>
@@ -381,8 +385,8 @@ var D = class extends c {
     </div>`;
 	}
 	renderAsk() {
-		let e = this.sources ?? [], n = this.draft.trim() === "";
-		return o`${e.length ? o`<lintje-multiselect
+		let e = this.sources ?? [], t = this.draft.trim() === "";
+		return s`${e.length ? s`<lintje-multiselect
             class="lintje-chat-composer__sources"
             label="Bronnen voor je volgende vraag"
             hide-label
@@ -396,44 +400,44 @@ var D = class extends c {
             @lintje-change=${(e) => {
 			e.stopPropagation(), this.emit("lintje-sources-change", { ids: e.detail });
 		}}
-          ></lintje-multiselect>` : t}
+          ></lintje-multiselect>` : o}
       <span id="hint" class="lintje-chat-composer__hint" role="status"
         >${this.noSource ? "Kies eerst een bron om een vraag te stellen" : ""}</span
       >
-      ${this.busy ? o`<lintje-button
+      ${this.busy ? s`<lintje-button
             class="lintje-chat-composer__stop"
             variant="secondary"
             icon="multimedia-player-stop"
             @click=${() => this.emit("lintje-answer-stop", {})}
             >Stoppen</lintje-button
-          >` : o`<div class="lintje-chat-composer__send">
-            ${this.#e.matches ? o`<lintje-icon-button
+          >` : s`<div class="lintje-chat-composer__send">
+            ${this.#e.matches ? s`<lintje-icon-button
                   class="lintje-chat-composer__send-half"
                   icon="functioneel-verzenden"
                   label="Versturen"
                   active
-                  ?disabled=${n || this.noSource}
+                  ?disabled=${t || this.noSource}
                   @click=${() => this.send()}
-                ></lintje-icon-button>` : o`<lintje-button
+                ></lintje-icon-button>` : s`<lintje-button
                   variant="primary"
                   icon="functioneel-verzenden"
-                  ?disabled=${n || this.noSource}
+                  ?disabled=${t || this.noSource}
                   @click=${() => this.send()}
                   >Versturen</lintje-button
                 >`}
-            ${this.plain ? t : o`<lintje-icon-button
+            ${this.plain ? o : s`<lintje-icon-button
                     class="lintje-chat-composer__send-half lintje-chat-composer__options-toggle"
                     icon="functioneel-delta-omlaag"
                     label="Opties bij versturen"
-                    ?active=${!(n || this.noSource)}
+                    ?active=${!(t || this.noSource)}
                     .expanded=${this.optionsOpen}
                     @click=${() => this.toggleOptions(!this.optionsOpen)}
                   ></lintje-icon-button>
-                  ${this.optionsOpen ? this.renderSendOptions() : t}`}
+                  ${this.optionsOpen ? this.renderSendOptions() : o}`}
           </div>`}`;
 	}
 	renderSendOptions() {
-		return o`<span
+		return s`<span
         class="lintje-chat-composer__scrim"
         @click=${() => this.toggleOptions(!1)}
       ></span>
@@ -448,7 +452,7 @@ var D = class extends c {
       >
         <lintje-radio-group
           label="Antwoord als"
-          .options=${g}
+          .options=${_}
           value=${this.form}
           @lintje-change=${(e) => {
 			e.stopPropagation(), this.form = e.detail;
@@ -456,7 +460,7 @@ var D = class extends c {
         ></lintje-radio-group>
         <lintje-radio-group
           label="Versturen met"
-          .options=${_}
+          .options=${v}
           value=${this.sendKey}
           @lintje-change=${(e) => {
 			e.stopPropagation(), this.setSendKey(e.detail);
@@ -474,7 +478,7 @@ var D = class extends c {
       </div>`;
 	}
 	renderEdit() {
-		return o`<span id="hint" class="lintje-chat-composer__hint"></span>
+		return s`<span id="hint" class="lintje-chat-composer__hint"></span>
       <lintje-button variant="tertiary" size="chrome" @click=${() => this.emitLocal("lintje-cancel")}
         >Annuleren</lintje-button
       >
@@ -487,6 +491,6 @@ var D = class extends c {
       >`;
 	}
 };
-e("lintje-chat-composer", D);
+r("lintje-chat-composer", O);
 //#endregion
-export { D as LintjeChatComposer, u as t };
+export { O as LintjeChatComposer, d as t };