lintje 0.2.0 → 0.3.0

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

@@ -1,7 +1,7 @@
-import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
 import { t as o } from "./chat-composer.js";
 //#region src/components/chat/chat-message/chat-message.css?inline
-var s = "/* The host is a full-width block, so a view can make it stick while its answer scrolls. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Visual order is reversed from document order, so the question is read first. The gaps keep\n   the edit button's hit area off the time and the bar. */\n.lintje-chat-message {\n  display: flex; flex-direction: row-reverse; align-items: center;\n  gap: var(--space-2);\n  max-width: var(--w-message);\n  margin-left: auto;\n}\n.lintje-chat-message__text {\n  min-width: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  font: var(--text-body);\n  color: var(--color-text-primary);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.lintje-chat-message__meta {\n  flex: none;\n  display: flex; flex-direction: row-reverse; align-items: center;\n  gap: var(--space-2);\n}\n.lintje-chat-message__time { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* A term is underlined, never recoloured; dashed gray marks an uncertain one. */\n.lintje-chat-message__term {\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-message__term.is-uncertain {\n  text-decoration-style: dashed;\n  text-decoration-color: var(--color-border-suggestion);\n}\n\n.lintje-chat-message--editing {\n  flex-direction: column; align-items: flex-end;\n  gap: var(--space-2);\n  width: 100%;\n}\n.lintje-chat-message__head { display: flex; align-items: baseline; gap: var(--space-2); }\n.lintje-chat-message__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-message__frame { align-self: stretch; }\n.lintje-chat-message__note { font: var(--text-small); color: var(--color-text-muted); }\n\n/* A phone keeps room on the left so the bar reads as the reader's side. */\n@media (max-width: 767px) {\n  .lintje-chat-message { flex-direction: column; align-items: flex-end; margin-left: var(--space-10); }\n  .lintje-chat-message--editing { margin-left: 0; }\n}\n\n/* Forced colours drop the bar's fill; a line keeps the question apart from the answer. */\n@media (forced-colors: active) {\n  .lintje-chat-message__text { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n", c = class extends a {
+var s = "/* The host is a full-width block, so a view can make it stick while its answer scrolls. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Visual order is reversed from document order, so the question is read first. The gaps keep\n   the edit button's hit area off the time and the bar. */\n.lintje-chat-message {\n  display: flex; flex-direction: row-reverse; align-items: center;\n  gap: var(--space-2);\n  max-width: var(--w-message);\n  margin-left: auto;\n}\n.lintje-chat-message__text {\n  min-width: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  font: var(--text-body);\n  color: var(--color-text-primary);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.lintje-chat-message__meta {\n  flex: none;\n  display: flex; flex-direction: row-reverse; align-items: center;\n  gap: var(--space-2);\n}\n.lintje-chat-message__time { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* A term is underlined, never recoloured; dashed gray marks an uncertain one. */\n.lintje-chat-message__term {\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-message__term.is-uncertain {\n  text-decoration-style: dashed;\n  text-decoration-color: var(--color-border-suggestion);\n}\n\n.lintje-chat-message--editing {\n  flex-direction: column; align-items: flex-end;\n  gap: var(--space-2);\n  width: 100%;\n}\n.lintje-chat-message__head { display: flex; align-items: baseline; gap: var(--space-2); }\n.lintje-chat-message__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-message__frame { align-self: stretch; }\n.lintje-chat-message__note { font: var(--text-small); color: var(--color-text-muted); }\n\n/* A phone keeps room on the left so the bar reads as the reader's side. */\n@media screen and (max-width: 767px) {\n  .lintje-chat-message { flex-direction: column; align-items: flex-end; margin-left: var(--space-10); }\n  .lintje-chat-message--editing { margin-left: 0; }\n}\n\n/* Forced colours drop the bar's fill; a line keeps the question apart from the answer. */\n@media (forced-colors: active) {\n  .lintje-chat-message__text { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n", c = class extends e {
 	constructor(...e) {
 		super(...e), this.text = "", this.editable = !1, this.editing = !1;
 	}
@@ -47,18 +47,18 @@ var s = "/* The host is a full-width block, so a view can make it stick while it
               label="Vraag bewerken"
               variant="flat"
               @click=${() => this.setEditing(!0)}
-            ></lintje-icon-button>` : t}
-        ${this.time ? i`<span class="lintje-chat-message__time">${this.time}</span>` : t}
+            ></lintje-icon-button>` : r}
+        ${this.time ? i`<span class="lintje-chat-message__time">${this.time}</span>` : r}
       </div>
     </div>`;
 	}
 	renderText() {
 		let e = o(this.text, this.terms).map((e) => e.term ? i`<span
-            class=${r({
+            class=${a({
 			"lintje-chat-message__term": !0,
 			"is-uncertain": e.term.certain === !1
 		})}
-            title=${e.term.kind ?? t}
+            title=${e.term.kind ?? r}
             >${e.text}</span
           >` : e.text);
 		return i`<span class="visually-hidden">Jij: </span>${e}`;
@@ -67,7 +67,7 @@ var s = "/* The host is a full-width block, so a view can make it stick while it
 		return i`<div class="lintje-chat-message lintje-chat-message--editing">
       <div class="lintje-chat-message__head">
         <span class="lintje-chat-message__label">Jij, bewerken</span>
-        ${this.time ? i`<span class="lintje-chat-message__time">${this.time}</span>` : t}
+        ${this.time ? i`<span class="lintje-chat-message__time">${this.time}</span>` : r}
       </div>
       <lintje-chat-composer
         class="lintje-chat-message__frame"
@@ -91,6 +91,6 @@ var s = "/* The host is a full-width block, so a view can make it stick while it
     </div>`;
 	}
 };
-e("lintje-chat-message", c);
+t("lintje-chat-message", c);
 //#endregion
 export { c as LintjeChatMessage };

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

@@ -1,15 +1,15 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, qt as o, zt as s } from "../chunks/base-Bg-IFOPG.js";
-import { t as c } from "../chunks/disclosure-BXTX04gM.js";
+import { Jt as e, Yt as t, Zt as n, en as r, lt as i, nn as a, st as o, ut as s } from "../chunks/base-CbmWxUig.js";
+import { t as c } from "../chunks/disclosure-D39vAR5q.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 {
+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 screen and (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 e {
 	constructor(...e) {
 		super(...e), this.detailsLabel = "Berekening", this.disabled = !1, this.open = !1;
 	}
 	static {
 		this.styles = [
-			e,
-			r(c),
-			r(l)
+			i,
+			n(c),
+			n(l)
 		];
 	}
 	static {
@@ -47,9 +47,9 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
 	value(e) {
 		if (e.options && !this.disabled) {
 			let t = e.options.find((t) => t.value === e.value);
-			return o`<span class="lintje-chat-strip__term">
+			return a`<span class="lintje-chat-strip__term">
         <span class="lintje-chat-strip__term-text">${t?.label ?? e.value}</span>
-        ${a("functioneel-delta-omlaag", { size: 16 })}
+        ${s("functioneel-delta-omlaag", { size: 16 })}
         <select
           class="lintje-chat-strip__select"
           aria-label=${e.label}
@@ -59,13 +59,13 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
 				n.value = e.value, r !== e.value && this.change(e.key, r);
 			}}
         >
-          ${e.options.map((e) => o`<option value=${e.value}>${e.label}</option>`)}
+          ${e.options.map((e) => a`<option value=${e.value}>${e.label}</option>`)}
         </select>
       </span>`;
 		}
-		if (e.pressed !== void 0 && !this.disabled) return o`<button
+		if (e.pressed !== void 0 && !this.disabled) return a`<button
         type="button"
-        class=${i({
+        class=${o({
 			"lintje-chat-strip__suggestion": !0,
 			"is-pressed": e.pressed
 		})}
@@ -75,12 +75,12 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
         ${e.value}
       </button>`;
 		let t = e.options?.find((t) => t.value === e.value);
-		return o`<span class="lintje-chat-strip__text">${t?.label ?? e.value}</span>`;
+		return a`<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 : o`<div
-      class=${i({
+		return !e.length && !t.length ? r : a`<div
+      class=${o({
 			"lintje-chat-strip": !0,
 			"lintje-disclosure": !0,
 			"is-open": this.open
@@ -90,8 +90,8 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
     >
       <div class="lintje-chat-strip__row">
         <dl class="lintje-chat-strip__items">
-          ${e.map((e) => o`<div
-              class=${i({
+          ${e.map((e) => a`<div
+              class=${o({
 			"lintje-chat-strip__item": !0,
 			"lintje-chat-strip__item--fixed": !e.options && e.pressed === void 0
 		})}
@@ -100,7 +100,7 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
               <dd class="lintje-chat-strip__value">${this.value(e)}</dd>
             </div>`)}
         </dl>
-        ${t.length ? o`<button
+        ${t.length ? a`<button
               type="button"
               class="lintje-chat-strip__toggle"
               aria-expanded=${String(this.open)}
@@ -110,22 +110,22 @@ var l = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
 		}}
             >
               <span>${this.detailsLabel}</span>
-              ${a("functioneel-delta-omlaag", {
+              ${s("functioneel-delta-omlaag", {
 			size: 16,
 			className: "lintje-disclosure__chevron"
 		})}
-            </button>` : n}
+            </button>` : r}
       </div>
-      ${t.length ? o`<div class="lintje-disclosure__body">
+      ${t.length ? a`<div class="lintje-disclosure__body">
             <div id="details" class="lintje-disclosure__body-inner">
               <dl class="lintje-chat-strip__details">
-                ${t.map((e) => o`<div class="lintje-chat-strip__detail">
+                ${t.map((e) => a`<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>` : r}
     </div>`;
 	}
 };

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

@@ -1,11 +1,11 @@
-import { Bt as e, Gt as t, Ht as n, qt as r, zt as i } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, nt as a } from "../chunks/base-CbmWxUig.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 {
+var o = ":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 screen and (max-width: 767px) {\n  .lintje-chat-suggestions { margin-left: var(--space-10); }\n  .lintje-chat-suggestions--start { margin-left: 0; }\n}\n", s = class extends e {
 	constructor(...e) {
 		super(...e), this.kind = "suggestion", this.align = "end";
 	}
 	static {
-		this.styles = n(a);
+		this.styles = [n(o), n(a)];
 	}
 	static {
 		this.properties = {
@@ -36,15 +36,15 @@ var a = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
 	}
 	render() {
 		let e = this.items ?? [];
-		return e.length ? r`<div
+		return e.length ? i`<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"}
+      aria-labelledby=${this.label ? "label" : r}
+      aria-label=${this.label ? r : "Suggesties"}
     >
-      ${this.label ? r`<span id="label" class="lintje-chat-suggestions__label">${this.label}</span>` : t}
+      ${this.label ? i`<span id="label" class="lintje-chat-suggestions__label">${this.label}</span>` : r}
       <div class="lintje-chat-suggestions__list">
-        ${e.map((e) => r`<button
+        ${e.map((e) => i`<button
             type="button"
             class="lintje-chat-suggestions__item"
             @click=${() => this.select(e)}
@@ -52,10 +52,10 @@ var a = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
             ${e.label}
           </button>`)}
       </div>
-      ${this.hint ? r`<p class="lintje-chat-suggestions__hint">${this.hint}</p>` : t}
-    </div>` : t;
+      ${this.hint ? i`<p class="lintje-chat-suggestions__hint">${this.hint}</p>` : r}
+    </div>` : r;
 	}
 };
-e("lintje-chat-suggestions", o);
+t("lintje-chat-suggestions", s);
 //#endregion
-export { o as LintjeChatSuggestions };
+export { s as LintjeChatSuggestions };

package/dist-elements/tag/chat.js

@@ -1,16 +1,16 @@
-import { Bt as e, Gt as t, H as n, Ht as r, Pt as i, U as a, Z as o, g as s, p as c, qt as l, zt as u } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Q as t, Ut as n, Yt as r, Z as i, Zt as a, en as o, h as s, nn as c, st as l, y as u } from "../chunks/base-CbmWxUig.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";
+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 screen and (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 i();
+		if (t = t.assignedSlot ?? t.parentElement ?? t.getRootNode().host ?? null, !t || t === document.body || t === document.documentElement) return n();
 		let e = getComputedStyle(t).overflowY;
 		if (e === "auto" || e === "scroll") return t;
 	}
@@ -33,15 +33,15 @@ var p = class {
 		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;
+}, m = class r extends e {
+	constructor(...e) {
+		super(...e), 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 e = f(this)?.scrollTop ?? 0, t = this.beyond();
+			e < this.#n && (this.#t = !1), t <= r.AT_END && (this.#t = !0), this.#n = e, this.away = !this.#t && t > r.AWAY;
 		};
 	}
 	static {
-		this.styles = r(d);
+		this.styles = a(d);
 	}
 	static {
 		this.properties = {
@@ -103,14 +103,14 @@ var p = class {
 		return this.renderRoot.querySelector(".lintje-chat__composer");
 	}
 	toLatest() {
-		this.toEnd(s() ? "auto" : "smooth"), this.composer?.focus();
+		this.toEnd(u() ? "auto" : "smooth"), this.composer?.focus();
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this.paged = f(this) === i(), (e.has("data") || e.has("editingId")) && a(this) && this.keepFocus();
+		super.willUpdate(e), this.paged = f(this) === n(), (e.has("data") || e.has("editingId")) && t(this) && this.keepFocus();
 	}
 	async keepFocus() {
 		await this.updateComplete, await new Promise((e) => requestAnimationFrame(e));
-		let e = n();
+		let e = i();
 		this.isConnected && (!e || e === document.body) && this.composer?.focus();
 	}
 	updated(e) {
@@ -128,17 +128,17 @@ var p = class {
 	}
 	render() {
 		let e = this.data;
-		if (!e) return t;
-		let n = e.turns ?? [], r = n[n.length - 1];
-		return l`<div class=${o({
+		if (!e) return o;
+		let t = e.turns ?? [], n = t[t.length - 1];
+		return c`<div class=${l({
 			"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)}
+        ${t.length ? this.renderTurns(t, e) : this.renderStart(e.start ?? {}, e.sources)}
       </div>
       <div class="lintje-chat__footer">
-        ${this.away && n.length ? l`<div class="lintje-chat__latest">
+        ${this.away && t.length ? c`<div class="lintje-chat__latest">
               <span class="lintje-chat__latest-button">
                 <lintje-button
                   variant="tertiary"
@@ -148,12 +148,12 @@ var p = class {
                   >Naar nieuwste</lintje-button
                 >
               </span>
-            </div>` : t}
+            </div>` : o}
         <lintje-chat-composer
           class="lintje-chat__composer"
-          placeholder=${e.placeholder ?? t}
-          recall=${r?.message.text ?? t}
-          ?busy=${n.some((e) => e.answer?.state === "streaming")}
+          placeholder=${e.placeholder ?? o}
+          recall=${n?.message.text ?? o}
+          ?busy=${t.some((e) => e.answer?.state === "streaming")}
           .sources=${e.sources}
           .vocabulary=${e.vocabulary}
           .draftTerms=${e.draftTerms}
@@ -161,55 +161,55 @@ var p = class {
       </div>
     </div>`;
 	}
-	renderTurns(e, n) {
-		let r = e.findIndex((e) => e.id === this.editingId), i = r !== -1, a = e.some((e) => e.answer?.state === "streaming");
-		return l`<div class="lintje-chat__list">
-      ${c(e, (e) => e.id, (s, c) => {
-			let u = s.answer, d = i && c >= r;
-			return l`<section class="lintje-chat__turn">
+	renderTurns(e, t) {
+		let n = e.findIndex((e) => e.id === this.editingId), r = n !== -1, i = e.some((e) => e.answer?.state === "streaming");
+		return c`<div class="lintje-chat__list">
+      ${s(e, (e) => e.id, (a, s) => {
+			let u = a.answer, d = r && s >= n;
+			return c`<section class="lintje-chat__turn">
             <lintje-chat-message
               class="lintje-chat__message"
-              turn-id=${s.id}
-              text=${s.message.text}
-              time=${s.message.time ?? t}
-              .terms=${s.message.terms}
-              .vocabulary=${n.vocabulary}
-              .sources=${n.sources}
-              ?editable=${!a && (!i || c === r)}
+              turn-id=${a.id}
+              text=${a.message.text}
+              time=${a.message.time ?? o}
+              .terms=${a.message.terms}
+              .vocabulary=${t.vocabulary}
+              .sources=${t.sources}
+              ?editable=${!i && (!r || s === n)}
               @lintje-editing-change=${this.onEditingChange}
             ></lintje-chat-message>
-            ${u ? l`<lintje-chat-answer
-                  class=${o({
+            ${u ? c`<lintje-chat-answer
+                  class=${l({
 				"lintje-chat__answer": !0,
 				"is-replaced": d
 			})}
-                  turn-id=${s.id}
+                  turn-id=${a.id}
                   state=${u.state ?? "ready"}
-                  lead=${u.lead ?? t}
-                  text=${u.text ?? t}
-                  status=${u.status ?? t}
+                  lead=${u.lead ?? o}
+                  text=${u.text ?? o}
+                  status=${u.status ?? o}
                   .blocks=${u.blocks}
                   .strip=${u.strip}
                   .error=${u.error}
                   .choices=${u.choices}
                   .followUps=${u.followUps}
-                  ?current=${c === e.length - 1 && !i}
+                  ?current=${s === e.length - 1 && !r}
                   ?inert=${d}
-                ></lintje-chat-answer>` : t}
+                ></lintje-chat-answer>` : o}
           </section>`;
 		})}
     </div>`;
 	}
-	renderStart(e, n = []) {
-		let r = n.filter((e) => e.selected);
-		return l`<div class="lintje-chat__start">
+	renderStart(e, t = []) {
+		let n = t.filter((e) => e.selected);
+		return c`<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 ? l`<p class="lintje-chat__lede">${e.intro}</p>` : t}
-        ${n.length ? this.renderSources(r) : t}
-        ${e.note ? l`<p class="lintje-chat__note">${e.note}</p>` : t}
+        ${e.intro ? c`<p class="lintje-chat__lede">${e.intro}</p>` : o}
+        ${t.length ? this.renderSources(n) : o}
+        ${e.note ? c`<p class="lintje-chat__note">${e.note}</p>` : o}
       </div>
       <lintje-chat-suggestions
         label="Jij, als eerste vraag"
@@ -218,10 +218,10 @@ var p = class {
     </div>`;
 	}
 	renderSources(e) {
-		let n = e.length === 0 ? "Je hebt geen bron gekozen" : `Je vraagt over ${e.length} ${e.length === 1 ? "bron" : "bronnen"}`;
-		return l`<section class="lintje-chat__sources" aria-labelledby="sources">
+		let t = e.length === 0 ? "Je hebt geen bron gekozen" : `Je vraagt over ${e.length} ${e.length === 1 ? "bron" : "bronnen"}`;
+		return c`<section class="lintje-chat__sources" aria-labelledby="sources">
       <div class="lintje-chat__sources-head">
-        <h4 id="sources" class="lintje-chat__sources-title">${n}</h4>
+        <h4 id="sources" class="lintje-chat__sources-title">${t}</h4>
         <lintje-button
           variant="link"
           size="compact"
@@ -229,15 +229,15 @@ var p = class {
           >Wijzigen</lintje-button
         >
       </div>
-      ${e.length ? l`<ul class="lintje-chat__source-list">
-            ${e.map((e) => l`<li class="lintje-chat__source">
+      ${e.length ? c`<ul class="lintje-chat__source-list">
+            ${e.map((e) => c`<li class="lintje-chat__source">
                 <span>${e.label}</span>
-                ${e.asOf ? l`<span class="lintje-chat__source-meta">${e.asOf}</span>` : t}
+                ${e.asOf ? c`<span class="lintje-chat__source-meta">${e.asOf}</span>` : o}
               </li>`)}
-          </ul>` : t}
+          </ul>` : o}
     </section>`;
 	}
 };
-e("lintje-chat", m);
+r("lintje-chat", m);
 //#endregion
 export { m as LintjeChat };

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

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

package/dist-elements/tag/checkbox-group.js

@@ -0,0 +1,59 @@
+import { Yt as e, Zt as t, en as n, lt as r, nn as i } from "../chunks/base-CbmWxUig.js";
+import { r as a, t as o } from "../chunks/input-CRW_exv_.js";
+import "./checkbox.js";
+//#region src/components/inputs/checkbox-group/checkbox-group.css?inline
+var s = "/* The group's stack; each row is a `lintje-checkbox`, which draws the box and its hint. */\n\n.lintje-checkbox-group { display: flex; flex-direction: column; }\n", c = class extends a {
+	constructor(...e) {
+		super(...e), this.selected = [];
+	}
+	static {
+		this.styles = [
+			r,
+			t(o),
+			t(s)
+		];
+	}
+	static {
+		this.properties = {
+			options: { attribute: !1 },
+			selected: { attribute: !1 }
+		};
+	}
+	toggle(e, t) {
+		let n = new Set(this.selected);
+		t ? n.add(e) : n.delete(e);
+		let r = (this.options ?? []).map((e) => e.value), i = [...r.filter((e) => n.has(e)), ...[...n].filter((e) => !r.includes(e))];
+		this.selected = i, this.announce(i);
+	}
+	focusControl(e) {
+		this.disabled || this.renderRoot.querySelector("lintje-checkbox")?.focus(e);
+	}
+	render() {
+		let e = this.selected ?? [];
+		return i`<div
+      class="lintje-field"
+      role="group"
+      aria-labelledby=${this.labelId}
+      aria-describedby=${this.describedBy}
+      aria-invalid=${this.error ? "true" : n}
+    >
+      ${this.renderLabel()}
+      <div class="lintje-checkbox-group">
+        ${(this.options ?? []).map((t) => i`<lintje-checkbox
+            class="lintje-checkbox-group__option"
+            label=${t.label}
+            hint=${t.description ?? n}
+            .checked=${e.includes(t.value)}
+            ?disabled=${this.disabled}
+            @lintje-change=${(e) => {
+			e.stopPropagation(), this.toggle(t.value, e.detail);
+		}}
+          ></lintje-checkbox>`)}
+      </div>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+e("lintje-checkbox-group", c);
+//#endregion
+export { c as LintjeCheckboxGroup };

package/dist-elements/tag/checkbox.js

@@ -1,12 +1,12 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, qt as a } from "../chunks/base-Bg-IFOPG.js";
-import { r as o, t as s } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { r as o, t as s } from "../chunks/input-CRW_exv_.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)];
+		this.styles = [r, t(s)];
 	}
 	static {
 		this.properties = {
@@ -25,8 +25,8 @@ var c = class extends o {
 	}
 	render() {
 		let e = this.indeterminate && !this.checked;
-		return a`<div class="lintje-field">
-      <label class=${i({
+		return i`<div class="lintje-field">
+      <label class=${a({
 			"lintje-choice": !0,
 			"is-disabled": this.disabled
 		})}>
@@ -44,18 +44,18 @@ var c = class extends o {
         <span class="lintje-choice__box" aria-hidden="true"
           ><span class="lintje-choice__mark">${e ? "–" : "✓"}</span></span
         >
-        <span class=${i({
+        <span class=${a({
 			"lintje-choice__label": !0,
 			"is-modified": this.modified
 		})}
           >${this.label} ${this.renderLabelSuffix()}</span
         >
-        ${this.modified ? a`<span class="lintje-label__dot"><span class="visually-hidden">afwijkend van standaard</span></span>` : n}
+        ${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);
+e("lintje-checkbox", c);
 //#endregion
 export { c as LintjeCheckbox };