lintje 0.1.1

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

@@ -0,0 +1,134 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o, zt as s } from "../chunks/base-rBLTcEIv.js";
+import { t as c } from "../chunks/disclosure-Z7Ny17sS.js";
+//#region src/components/chat/chat-strip/chat-strip.css?inline
+var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-chat-strip {\n  border-top: 1px solid var(--color-border-default);\n  border-bottom: 1px solid var(--color-border-default);\n  color: var(--color-text-primary);\n}\n.lintje-chat-strip__row {\n  display: flex; flex-wrap: wrap; align-items: flex-end;\n  gap: var(--space-2) var(--space-6);\n  padding: var(--space-2) 0;\n}\n.lintje-chat-strip__items {\n  flex: 1 1 auto; min-width: 0;\n  display: flex; flex-wrap: wrap; align-items: flex-end;\n  gap: var(--space-2) var(--space-6);\n  margin: 0;\n}\n.lintje-chat-strip__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }\n.lintje-chat-strip__label {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-chat-strip__value { margin: 0; min-width: 0; font: var(--text-ui); }\n\n/* Every form of a value is one line, so a row of mixed forms shares a baseline. */\n.lintje-chat-strip__text,\n.lintje-chat-strip__term,\n.lintje-chat-strip__suggestion {\n  display: inline-flex; align-items: center;\n  min-height: var(--h-chip-field);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n.lintje-chat-strip__term,\n.lintje-chat-strip__suggestion.is-pressed {\n  background: var(--color-term-bg);\n  border-bottom: 2px solid var(--color-term-line);\n}\n.lintje-chat-strip__term {\n  position: relative;\n  gap: var(--space-1);\n  padding: 0 0 0 var(--space-1);\n}\n/* The native select lies invisibly over the drawing for pointer, keyboard and the phone's picker.\n   It reaches the target height above and below only, never over a neighbouring value. */\n.lintje-chat-strip__select {\n  position: absolute; inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n  width: 100%; height: auto;\n  opacity: 0;\n  cursor: pointer;\n  appearance: none;\n}\n.lintje-chat-strip__term:focus-within {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n\n/* Dashed while only a suggestion. Like the select, it and the toggle get a transparent hit area. */\n.lintje-chat-strip__suggestion,\n.lintje-chat-strip__toggle { position: relative; }\n.lintje-chat-strip__suggestion::after,\n.lintje-chat-strip__toggle::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-chat-strip__suggestion {\n  padding: 0 var(--space-1);\n  border-bottom: 2px dashed var(--color-border-suggestion);\n  transition: background var(--dur-hover);\n}\n.lintje-chat-strip__suggestion:hover { background: var(--color-bg-subtle); }\n.lintje-chat-strip__suggestion.is-pressed:hover { background: var(--color-term-bg); }\n\n.lintje-chat-strip__toggle {\n  display: inline-flex; align-items: center; gap: var(--space-1);\n  min-height: var(--h-chip-field);\n  margin-left: auto;\n  font: var(--text-small); font-weight: 700;\n  color: var(--color-text-primary);\n}\n\n.lintje-chat-strip__details {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: var(--space-2) var(--space-4);\n  margin: 0;\n  padding: 0 0 var(--space-3);\n  font: var(--text-ui);\n}\n.lintje-chat-strip__detail { display: contents; }\n.lintje-chat-strip__detail-term { color: var(--color-text-muted); }\n.lintje-chat-strip__detail-text { margin: 0; color: var(--color-text-primary); }\n\n/* Below 768 px the strip switches representation (rule 9). */\n@media (max-width: 767px) {\n  .lintje-chat-strip__row { display: block; padding: var(--space-1) 0 0; }\n  .lintje-chat-strip__items {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 0 var(--space-4);\n    align-items: stretch;\n  }\n  .lintje-chat-strip__item { justify-content: center; min-height: var(--h-touch); }\n  .lintje-chat-strip__item--fixed { grid-column: 1 / -1; }\n  .lintje-chat-strip__select,\n  .lintje-chat-strip__suggestion::after { inset: calc(var(--space-6) * -1) 0 calc(var(--space-2) * -1); }\n  .lintje-chat-strip__toggle {\n    width: 100%; min-height: var(--h-touch);\n    justify-content: space-between;\n    margin: var(--space-1) 0 0;\n    border-top: 1px solid var(--color-border-default);\n    font: var(--text-ui); font-weight: 700;\n  }\n  .lintje-chat-strip__details { grid-template-columns: minmax(0, 1fr); gap: 0; }\n  .lintje-chat-strip__detail-text { margin-bottom: var(--space-2); }\n}\n", u = class extends s {
+	constructor(...e) {
+		super(...e), this.detailsLabel = "Berekening", this.disabled = !1, this.open = !1;
+	}
+	static {
+		this.styles = [
+			e,
+			r(c),
+			r(l)
+		];
+	}
+	static {
+		this.properties = {
+			items: { attribute: !1 },
+			details: { attribute: !1 },
+			detailsLabel: {
+				type: String,
+				attribute: "details-label"
+			},
+			disabled: {
+				type: Boolean,
+				reflect: !0
+			},
+			turnId: {
+				type: String,
+				attribute: "turn-id"
+			},
+			open: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	change(e, t) {
+		this.emit("lintje-strip-change", {
+			turnId: this.turnId ?? null,
+			key: e,
+			value: t
+		});
+	}
+	updated() {
+		for (let e of this.renderRoot.querySelectorAll("select")) e.value = e.dataset.value ?? "";
+	}
+	value(e) {
+		if (e.options && !this.disabled) {
+			let t = e.options.find((t) => t.value === e.value);
+			return i`<span class="lintje-chat-strip__term">
+        <span class="lintje-chat-strip__term-text">${t?.label ?? e.value}</span>
+        ${o("functioneel-delta-omlaag", { size: 16 })}
+        <select
+          class="lintje-chat-strip__select"
+          aria-label=${e.label}
+          data-value=${e.value}
+          @change=${(t) => {
+				let n = t.target, r = n.value;
+				n.value = e.value, r !== e.value && this.change(e.key, r);
+			}}
+        >
+          ${e.options.map((e) => i`<option value=${e.value}>${e.label}</option>`)}
+        </select>
+      </span>`;
+		}
+		if (e.pressed !== void 0 && !this.disabled) return i`<button
+        type="button"
+        class=${a({
+			"lintje-chat-strip__suggestion": !0,
+			"is-pressed": e.pressed
+		})}
+        aria-pressed=${String(e.pressed)}
+        @click=${() => this.change(e.key, !e.pressed)}
+      >
+        ${e.value}
+      </button>`;
+		let t = e.options?.find((t) => t.value === e.value);
+		return i`<span class="lintje-chat-strip__text">${t?.label ?? e.value}</span>`;
+	}
+	render() {
+		let e = (this.items ?? []).filter((e) => !(this.disabled && e.pressed === !1)), t = this.details ?? [];
+		return !e.length && !t.length ? n : i`<div
+      class=${a({
+			"lintje-chat-strip": !0,
+			"lintje-disclosure": !0,
+			"is-open": this.open
+		})}
+      role="group"
+      aria-label="Uitgangspunten"
+    >
+      <div class="lintje-chat-strip__row">
+        <dl class="lintje-chat-strip__items">
+          ${e.map((e) => i`<div
+              class=${a({
+			"lintje-chat-strip__item": !0,
+			"lintje-chat-strip__item--fixed": !e.options && e.pressed === void 0
+		})}
+            >
+              <dt class="lintje-chat-strip__label">${e.label}</dt>
+              <dd class="lintje-chat-strip__value">${this.value(e)}</dd>
+            </div>`)}
+        </dl>
+        ${t.length ? i`<button
+              type="button"
+              class="lintje-chat-strip__toggle"
+              aria-expanded=${String(this.open)}
+              aria-controls="details"
+              @click=${() => {
+			this.open = !this.open;
+		}}
+            >
+              <span>${this.detailsLabel}</span>
+              ${o("functioneel-delta-omlaag", {
+			size: 16,
+			className: "lintje-disclosure__chevron"
+		})}
+            </button>` : n}
+      </div>
+      ${t.length ? i`<div class="lintje-disclosure__body">
+            <div id="details" class="lintje-disclosure__body-inner">
+              <dl class="lintje-chat-strip__details">
+                ${t.map((e) => i`<div class="lintje-chat-strip__detail">
+                    <dt class="lintje-chat-strip__detail-term">${e.term}</dt>
+                    <dd class="lintje-chat-strip__detail-text">${e.description}</dd>
+                  </div>`)}
+              </dl>
+            </div>
+          </div>` : n}
+    </div>`;
+	}
+};
+t("lintje-chat-strip", u);
+//#endregion
+export { u as LintjeChatStrip };

package/dist-elements/tag/chat-suggestions.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/chat/chat-suggestions/chat-suggestions.js'

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

@@ -0,0 +1,61 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, zt as i } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/chat/chat-suggestions/chat-suggestions.css?inline
+var a = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-chat-suggestions {\n  display: flex; flex-direction: column; align-items: flex-end;\n  gap: var(--space-2);\n  max-width: var(--w-message);\n  margin-left: auto;\n}\n.lintje-chat-suggestions__label {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-chat-suggestions__list {\n  display: flex; flex-direction: column; align-items: flex-end;\n  gap: var(--space-2);\n}\n.lintje-chat-suggestions--choice .lintje-chat-suggestions__list {\n  flex-direction: row; flex-wrap: wrap; justify-content: flex-end;\n}\n\n.lintje-chat-suggestions__item {\n  min-height: var(--h-touch);\n  padding: var(--space-2) var(--space-4);\n  font: var(--text-body);\n  color: var(--color-text-primary);\n  text-align: left;\n  transition: background var(--dur-hover);\n}\n.lintje-chat-suggestions__item:hover { background: var(--color-bg-subtle); }\n\n.lintje-chat-suggestions--suggestion .lintje-chat-suggestions__item {\n  border: 1px dashed var(--color-border-suggestion);\n}\n.lintje-chat-suggestions--choice .lintje-chat-suggestions__item {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-choice);\n}\n.lintje-chat-suggestions--choice .lintje-chat-suggestions__item:hover { background: var(--color-bg-subtle); }\n\n.lintje-chat-suggestions__hint { font: var(--text-small); color: var(--color-text-muted); }\n\n/* Outside a conversation: left, the sentences side by side, the full width of the column. */\n.lintje-chat-suggestions--start { align-items: flex-start; max-width: none; margin-left: 0; }\n.lintje-chat-suggestions--start .lintje-chat-suggestions__list {\n  flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start;\n}\n\n@media (max-width: 767px) {\n  .lintje-chat-suggestions { margin-left: var(--space-10); }\n  .lintje-chat-suggestions--start { margin-left: 0; }\n}\n", o = class extends i {
+	constructor(...e) {
+		super(...e), this.kind = "suggestion", this.align = "end";
+	}
+	static {
+		this.styles = n(a);
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			hint: { type: String },
+			kind: {
+				type: String,
+				reflect: !0
+			},
+			align: {
+				type: String,
+				reflect: !0
+			},
+			items: { attribute: !1 },
+			turnId: {
+				type: String,
+				attribute: "turn-id"
+			}
+		};
+	}
+	select(e) {
+		this.emit("lintje-suggestion-select", {
+			turnId: this.turnId ?? null,
+			kind: this.kind,
+			label: e.label,
+			value: e.value ?? e.label
+		});
+	}
+	render() {
+		let e = this.items ?? [];
+		return e.length ? r`<div
+      class="lintje-chat-suggestions lintje-chat-suggestions--${this.kind} lintje-chat-suggestions--${this.align}"
+      role="group"
+      aria-labelledby=${this.label ? "label" : t}
+      aria-label=${this.label ? t : "Suggesties"}
+    >
+      ${this.label ? r`<span id="label" class="lintje-chat-suggestions__label">${this.label}</span>` : t}
+      <div class="lintje-chat-suggestions__list">
+        ${e.map((e) => r`<button
+            type="button"
+            class="lintje-chat-suggestions__item"
+            @click=${() => this.select(e)}
+          >
+            ${e.label}
+          </button>`)}
+      </div>
+      ${this.hint ? r`<p class="lintje-chat-suggestions__hint">${this.hint}</p>` : t}
+    </div>` : t;
+	}
+};
+e("lintje-chat-suggestions", o);
+//#endregion
+export { o as LintjeChatSuggestions };

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

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

package/dist-elements/tag/chat.js

@@ -0,0 +1,243 @@
+import { Bt as e, Gt as t, H as n, Ht as r, Kt as i, Pt as a, U as o, Z as s, g as c, p as l, zt as u } from "../chunks/base-rBLTcEIv.js";
+import "./chat-suggestions.js";
+import "./chat-answer.js";
+import "./chat-composer.js";
+import "./chat-message.js";
+//#region src/components/chat/chat/chat.css?inline
+var d = "/* A grid, so the chat fills a host box that is taller than the conversation. */\n:host {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* In the flow: it grows with the conversation and scrolls with what scrolls around it. */\n.lintje-chat {\n  display: flex; flex-direction: column;\n  min-width: 0;\n  background: var(--color-bg-page);\n  color: var(--color-text-primary);\n}\n\n.lintje-chat__log { flex: 1 0 auto; min-width: 0; display: flex; flex-direction: column; }\n\n.lintje-chat__list,\n.lintje-chat__start {\n  width: 100%;\n  max-width: calc(var(--w-text) + 2 * var(--space-6));\n  margin: 0 auto;\n  padding: var(--space-6);\n  display: flex; flex-direction: column;\n  gap: var(--space-10);\n}\n.lintje-chat__start { margin: auto; }\n.lintje-chat__turn { display: flex; flex-direction: column; gap: var(--space-6); }\n\n/* The question sticks while its answer scrolls under it, painting the page behind itself so\n   nothing shows through. Not on a phone (it would keep a fifth of the screen), nor while edited. */\n@media (min-width: 768px) {\n  .lintje-chat__message:not([editing]) {\n    position: sticky; top: 0; z-index: 3;\n    margin: calc(var(--space-2) * -1) 0;\n    padding: var(--space-2) 0;\n    background: var(--color-bg-page);\n  }\n  /* The page scrolls: the shell's pinned bar stands over the top of the viewport. */\n  .lintje-chat--page .lintje-chat__message:not([editing]) {\n    top: var(--h-topbar);\n  }\n}\n\n.lintje-chat__answer { transition: opacity var(--dur-base) var(--ease-in-motion); }\n.lintje-chat__answer.is-replaced { opacity: 0.45; }\n\n/* Floats over the conversation, above the question box; only the button takes the pointer. */\n.lintje-chat__latest {\n  position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-4));\n  display: flex; justify-content: center;\n  pointer-events: none;\n  animation: lintje-fade-in var(--dur-base) var(--ease-in-motion) both;\n}\n.lintje-chat__latest-button {\n  display: inline-flex;\n  background: var(--color-bg-surface);\n  box-shadow: var(--shadow-popover);\n  pointer-events: auto;\n}\n\n/* Stays in view at the bottom of what scrolls; the conversation passes under it. */\n.lintje-chat__footer {\n  flex: none;\n  position: sticky; bottom: 0; z-index: 4;\n  padding: var(--space-4) var(--space-6) var(--space-5);\n  background: var(--color-bg-surface);\n  border-top: 1px solid var(--color-border-default);\n}\n.lintje-chat__composer { max-width: var(--w-text); margin: 0 auto; }\n\n/* --- The start screen --- */\n.lintje-chat__intro { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }\n.lintje-chat__title { font: var(--text-h1-display); color: var(--color-text-primary); }\n.lintje-chat__lede { font: var(--text-body); margin-top: calc(var(--space-2) * -1); }\n.lintje-chat__note { font: var(--text-small); color: var(--color-text-muted); }\n\n.lintje-chat__sources {\n  display: flex; flex-direction: column; gap: var(--space-2);\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-chat__sources-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }\n.lintje-chat__sources-title { font: var(--text-tile-title); }\n.lintje-chat__source {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;\n  gap: var(--space-1) var(--space-3);\n  min-height: var(--h-button-chrome);\n  border-top: 1px solid var(--color-border-default);\n  font: var(--text-ui);\n}\n.lintje-chat__source-meta { font: var(--text-small); color: var(--color-text-muted); }\n\n@media (max-width: 767px) {\n  .lintje-chat__list,\n  .lintje-chat__start { padding: var(--space-4); gap: var(--space-8); }\n  .lintje-chat__title { font: var(--text-h1); }\n  .lintje-chat__footer { padding: var(--space-3) var(--space-4) var(--space-4); }\n  .lintje-chat__sources { padding: var(--space-3) var(--space-4); }\n}\n";
+//#endregion
+//#region src/components/chat/chat/chat.ts
+function f(e) {
+	let t = e;
+	for (;;) {
+		if (t = t.assignedSlot ?? t.parentElement ?? t.getRootNode().host ?? null, !t || t === document.body || t === document.documentElement) return a();
+		let e = getComputedStyle(t).overflowY;
+		if (e === "auto" || e === "scroll") return t;
+	}
+}
+var p = class {
+	#e = null;
+	#t = "";
+	#n = "";
+	constructor(e) {
+		this.side = e;
+	}
+	reserve(e, t) {
+		if (e !== this.#e && (this.release(), this.#e = e, this.#t = e?.style[this.side] ?? ""), !e) return;
+		let n = e.style[this.side];
+		n !== this.#n && (this.#t = n);
+		let r = parseFloat(this.#t) || 0;
+		this.#n = t > r ? `${Math.ceil(t)}px` : this.#t, e.style[this.side] = this.#n;
+	}
+	release() {
+		let e = this.#e;
+		e && e.style[this.side] === this.#n && (e.style[this.side] = this.#t), this.#e = null, this.#n = "";
+	}
+}, m = class e extends u {
+	constructor(...t) {
+		super(...t), this.editingId = null, this.away = !1, this.paged = !1, this.#e = 0, this.#t = !0, this.#n = 0, this.#r = null, this.#i = null, this.#a = new p("scrollPaddingTop"), this.#o = new p("scrollPaddingBottom"), this.#s = () => {
+			let t = f(this)?.scrollTop ?? 0, n = this.beyond();
+			t < this.#n && (this.#t = !1), n <= e.AT_END && (this.#t = !0), this.#n = t, this.away = !this.#t && n > e.AWAY;
+		};
+	}
+	static {
+		this.styles = r(d);
+	}
+	static {
+		this.properties = {
+			data: { attribute: !1 },
+			editingId: { state: !0 },
+			away: { state: !0 },
+			paged: { state: !0 }
+		};
+	}
+	static {
+		this.AWAY = 120;
+	}
+	static {
+		this.AT_END = 8;
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("scroll", this.#s, {
+			capture: !0,
+			passive: !0
+		}), typeof ResizeObserver < "u" && (this.#r = new ResizeObserver(() => {
+			this.#t && this.data?.turns?.length && this.toEnd(), this.reserveRoom();
+		}), this.#r.observe(this), this.#i = new ResizeObserver(() => this.reserveRoom()));
+	}
+	disconnectedCallback() {
+		window.removeEventListener("scroll", this.#s, { capture: !0 }), this.#r?.disconnect(), this.#r = null, this.#i?.disconnect(), this.#i = null, this.#a.release(), this.#o.release(), super.disconnectedCallback();
+	}
+	reserveRoom() {
+		let e = this.renderRoot.querySelector(".lintje-chat__footer");
+		if (!this.isConnected || !e) return;
+		let t = f(this), n = 0;
+		for (let e of this.renderRoot.querySelectorAll(".lintje-chat__message")) {
+			let t = getComputedStyle(e);
+			t.position === "sticky" && (n = Math.max(n, (parseFloat(t.top) || 0) + e.offsetHeight));
+		}
+		this.#a.reserve(t, n), this.#o.reserve(t, e.offsetHeight);
+	}
+	beyond() {
+		let e = f(this);
+		if (!e) return 0;
+		let t = e === document.scrollingElement ? e.clientHeight : e.getBoundingClientRect().bottom;
+		return this.getBoundingClientRect().bottom - t;
+	}
+	#s;
+	toEnd(e = "auto") {
+		let t = this.beyond();
+		t > 0 && f(this)?.scrollBy({
+			top: t,
+			behavior: e
+		});
+	}
+	get composer() {
+		return this.renderRoot.querySelector(".lintje-chat__composer");
+	}
+	toLatest() {
+		this.toEnd(c() ? "auto" : "smooth"), this.composer?.focus();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this.paged = f(this) === a(), (e.has("data") || e.has("editingId")) && o(this) && this.keepFocus();
+	}
+	async keepFocus() {
+		await this.updateComplete, await new Promise((e) => requestAnimationFrame(e));
+		let e = n();
+		this.isConnected && (!e || e === document.body) && this.composer?.focus();
+	}
+	updated(e) {
+		let t = this.renderRoot.querySelector(".lintje-chat__footer");
+		t && this.#i?.observe(t);
+		let n = this.data?.turns?.length ?? 0;
+		(n !== this.#e || e.has("editingId") || e.has("paged")) && this.reserveRoom(), e.has("data") && (n > this.#e && (this.#t = !0, this.toEnd()), this.#e = n);
+	}
+	get dataSettings() {
+		return this.data ?? void 0;
+	}
+	onEditingChange(e) {
+		let { turnId: t, editing: n } = e.detail;
+		n ? this.editingId = t : this.editingId === t && (this.editingId = null);
+	}
+	render() {
+		let e = this.data;
+		if (!e) return t;
+		let n = e.turns ?? [], r = n[n.length - 1];
+		return i`<div class=${s({
+			"lintje-chat": !0,
+			"lintje-chat--page": this.paged
+		})}>
+      <div class="lintje-chat__log" role="log" aria-label="Gesprek">
+        ${n.length ? this.renderTurns(n, e) : this.renderStart(e.start ?? {}, e.sources)}
+      </div>
+      <div class="lintje-chat__footer">
+        ${this.away && n.length ? i`<div class="lintje-chat__latest">
+              <span class="lintje-chat__latest-button">
+                <lintje-button
+                  variant="tertiary"
+                  size="chrome"
+                  icon="functioneel-pijl-omlaag"
+                  @click=${() => this.toLatest()}
+                  >Naar nieuwste</lintje-button
+                >
+              </span>
+            </div>` : t}
+        <lintje-chat-composer
+          class="lintje-chat__composer"
+          placeholder=${e.placeholder ?? t}
+          recall=${r?.message.text ?? t}
+          ?busy=${n.some((e) => e.answer?.state === "streaming")}
+          .sources=${e.sources}
+          .vocabulary=${e.vocabulary}
+          .draftTerms=${e.draftTerms}
+        ></lintje-chat-composer>
+      </div>
+    </div>`;
+	}
+	renderTurns(e, n) {
+		let r = e.findIndex((e) => e.id === this.editingId), a = r !== -1, o = e.some((e) => e.answer?.state === "streaming");
+		return i`<div class="lintje-chat__list">
+      ${l(e, (e) => e.id, (c, l) => {
+			let u = c.answer, d = a && l >= r;
+			return i`<section class="lintje-chat__turn">
+            <lintje-chat-message
+              class="lintje-chat__message"
+              turn-id=${c.id}
+              text=${c.message.text}
+              time=${c.message.time ?? t}
+              .terms=${c.message.terms}
+              .vocabulary=${n.vocabulary}
+              .sources=${n.sources}
+              ?editable=${!o && (!a || l === r)}
+              @lintje-editing-change=${this.onEditingChange}
+            ></lintje-chat-message>
+            ${u ? i`<lintje-chat-answer
+                  class=${s({
+				"lintje-chat__answer": !0,
+				"is-replaced": d
+			})}
+                  turn-id=${c.id}
+                  state=${u.state ?? "ready"}
+                  lead=${u.lead ?? t}
+                  text=${u.text ?? t}
+                  status=${u.status ?? t}
+                  .blocks=${u.blocks}
+                  .strip=${u.strip}
+                  .error=${u.error}
+                  .choices=${u.choices}
+                  .followUps=${u.followUps}
+                  ?current=${l === e.length - 1 && !a}
+                  ?inert=${d}
+                ></lintje-chat-answer>` : t}
+          </section>`;
+		})}
+    </div>`;
+	}
+	renderStart(e, n = []) {
+		let r = n.filter((e) => e.selected);
+		return i`<div class="lintje-chat__start">
+      <div class="lintje-chat__intro">
+        <h3 class="lintje-chat__title">
+          <span class="visually-hidden">Assistent: </span>${e.title ?? "Waar wil je meer over weten?"}
+        </h3>
+        ${e.intro ? i`<p class="lintje-chat__lede">${e.intro}</p>` : t}
+        ${n.length ? this.renderSources(r) : t}
+        ${e.note ? i`<p class="lintje-chat__note">${e.note}</p>` : t}
+      </div>
+      <lintje-chat-suggestions
+        label="Jij, als eerste vraag"
+        .items=${e.starters}
+      ></lintje-chat-suggestions>
+    </div>`;
+	}
+	renderSources(e) {
+		let n = e.length === 0 ? "Je hebt geen bron gekozen" : `Je vraagt over ${e.length} ${e.length === 1 ? "bron" : "bronnen"}`;
+		return i`<section class="lintje-chat__sources" aria-labelledby="sources">
+      <div class="lintje-chat__sources-head">
+        <h4 id="sources" class="lintje-chat__sources-title">${n}</h4>
+        <lintje-button
+          variant="link"
+          size="compact"
+          @click=${() => this.renderRoot.querySelector("lintje-chat-composer")?.openSources()}
+          >Wijzigen</lintje-button
+        >
+      </div>
+      ${e.length ? i`<ul class="lintje-chat__source-list">
+            ${e.map((e) => i`<li class="lintje-chat__source">
+                <span>${e.label}</span>
+                ${e.asOf ? i`<span class="lintje-chat__source-meta">${e.asOf}</span>` : t}
+              </li>`)}
+          </ul>` : t}
+    </section>`;
+	}
+};
+e("lintje-chat", m);
+//#endregion
+export { m as LintjeChat };

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

@@ -0,0 +1 @@
+export * from '../types/components/inputs/checkbox/checkbox.js'

package/dist-elements/tag/checkbox.js

@@ -0,0 +1,61 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a } from "../chunks/base-rBLTcEIv.js";
+import { r as o, t as s } from "../chunks/input-jQVTln7H.js";
+//#region src/components/inputs/checkbox/checkbox.ts
+var c = class extends o {
+	constructor(...e) {
+		super(...e), this.checked = !1, this.indeterminate = !1;
+	}
+	static {
+		this.styles = [e, r(s)];
+	}
+	static {
+		this.properties = {
+			checked: {
+				type: Boolean,
+				reflect: !0
+			},
+			indeterminate: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	change(e) {
+		this.checked = e.target.checked, this.indeterminate = !1, this.commit(this.checked);
+	}
+	render() {
+		let e = this.indeterminate && !this.checked;
+		return i`<div class="lintje-field">
+      <label class=${a({
+			"lintje-choice": !0,
+			"is-disabled": this.disabled
+		})}>
+        <input
+          type="checkbox"
+          class="lintje-choice__input"
+          .checked=${this.checked}
+          .indeterminate=${e}
+          aria-describedby=${this.describedBy}
+          aria-invalid=${this.error ? "true" : n}
+          aria-required=${this.required ? "true" : n}
+          ?disabled=${this.disabled}
+          @change=${this.change}
+        />
+        <span class="lintje-choice__box" aria-hidden="true"
+          ><span class="lintje-choice__mark">${e ? "–" : "✓"}</span></span
+        >
+        <span class=${a({
+			"lintje-choice__label": !0,
+			"is-modified": this.modified
+		})}
+          >${this.label} ${this.renderLabelSuffix()}</span
+        >
+        ${this.modified ? i`<span class="lintje-label__dot"><span class="visually-hidden">afwijkend van standaard</span></span>` : n}
+      </label>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-checkbox", c);
+//#endregion
+export { c as LintjeCheckbox };

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

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

package/dist-elements/tag/code.js

@@ -0,0 +1,60 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, O as i, Z as a } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/content/code/code.css?inline
+var o = "/* No syntax colouring: the chart grammar is the only place colour carries meaning. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-code { position: relative; }\n.lintje-code__language {\n  /* Inside the border, on the block's surface: a long line scrolls under the label. */\n  position: absolute; top: 1px; right: 1px;\n  z-index: 1;\n  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px) var(--space-1) var(--space-2);\n  background: var(--color-bg-subtle);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n.lintje-code__block {\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--radius);\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  line-height: 1.6;\n  color: var(--color-text-primary);\n  font-variant-numeric: normal;\n  overflow-x: auto;\n  white-space: pre;\n  tab-size: 2;\n}\n.lintje-code--labelled .lintje-code__block { padding-right: var(--space-10); }\n.lintje-code__block.is-wrapped { white-space: pre-wrap; overflow-wrap: anywhere; }\n\n/* Line numbers are a CSS counter, so a copy is only the code. The line spans stay inline and\n   carry their own newline: a block-level line would break twice and blank every second line. */\n.lintje-code__line { counter-increment: lintje-code-line; }\n.lintje-code--numbered .lintje-code__block { counter-reset: lintje-code-line; }\n.lintje-code--numbered .lintje-code__line::before {\n  /* A screen reader reads the code, not a number before each line. */\n  content: counter(lintje-code-line);\n  content: counter(lintje-code-line) / '';\n  display: inline-block;\n  width: var(--space-6);\n  padding-right: var(--space-3);\n  text-align: right;\n  color: var(--color-text-disabled);\n  user-select: none;\n}\n", s = class extends i {
+	constructor(...e) {
+		super(...e), this.numbered = !1, this.wrap = !1;
+	}
+	static {
+		this.styles = n(o);
+	}
+	static {
+		this.properties = {
+			text: { attribute: !1 },
+			language: {
+				type: String,
+				reflect: !0
+			},
+			numbered: {
+				type: Boolean,
+				reflect: !0
+			},
+			wrap: {
+				type: Boolean,
+				reflect: !0
+			},
+			label: { type: String }
+		};
+	}
+	get body() {
+		return this.text ?? "";
+	}
+	get name() {
+		return this.label ? this.label : this.language ? `Codeblok (${this.language})` : "Codeblok";
+	}
+	render() {
+		let e = this.body.split("\n");
+		return r`<div
+      class=${a({
+			"lintje-code": !0,
+			"lintje-code--numbered": this.numbered,
+			"lintje-code--labelled": !!this.language
+		})}
+    >
+      ${this.language ? r`<span class="lintje-code__language" aria-hidden="true">${this.language}</span>` : t}
+      <pre
+        class=${a({
+			"lintje-code__block": !0,
+			"is-wrapped": this.wrap
+		})}
+        role="region"
+        tabindex="0"
+        aria-label=${this.name}
+      ><code>${this.numbered ? e.map((t, n) => r`<span class="lintje-code__line"
+                  >${n < e.length - 1 ? `${t}\n` : t}</span
+                >`) : this.body || r`<slot></slot>`}</code></pre>
+    </div>`;
+	}
+};
+e("lintje-code", s);
+//#endregion
+export { s as LintjeCode };

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

@@ -0,0 +1 @@
+export * from '../types/components/inputs/combobox/combobox.js'