lintje 0.1.1

package/dist-elements/tag/text-editor.js

@@ -0,0 +1,439 @@
+import { $ as e, Bt as t, G as n, Gt as r, Ht as i, Kt as a, Z as o } from "../chunks/base-rBLTcEIv.js";
+import { r as s, t as c } from "../chunks/input-jQVTln7H.js";
+import { t as l } from "../chunks/prose-CmKVp5kL.js";
+import "./text-input.js";
+//#region src/components/inputs/text-editor/text-editor.css?inline
+var u = "/* The text editor: a frame with the toolbar on top and the editing surface under it. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* 1 px field border; with the focus in the surface the ring goes round the whole frame. */\n.lintje-text-editor {\n  display: flex; flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n}\n.lintje-text-editor:has(.lintje-text-editor__surface:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-text-editor.is-error { border: 2px solid var(--color-error); }\n/* Disabled wins over error: after it, the whole border back to 1 px strong. */\n.lintje-text-editor.is-disabled { border: 1px solid var(--color-border-strong); }\n\n/* --- The toolbar --------------------------------------------------------- */\n/* The row gap keeps the buttons' hit areas from overlapping. */\n.lintje-text-editor__toolbar {\n  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-1);\n  padding: var(--space-1);\n  background: var(--color-bg-page);\n  border-bottom: 1px solid var(--color-border-default);\n}\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-text-editor__tool {\n  position: relative;\n  flex: none;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: inline-flex; align-items: center; justify-content: center;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-text-editor__tool::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-text-editor__tool--bold,\n.lintje-text-editor__tool--heading { font-weight: 700; }\n.lintje-text-editor__tool--italic { font-style: italic; }\n/* The text fallback while an icon has no file. */\n.lintje-text-editor__tool--word {\n  width: auto; min-width: var(--h-icon-button);\n  padding: 0 var(--space-2);\n  font-size: 0.875rem; font-weight: 700;\n}\n.lintje-text-editor__tool:hover:not(:disabled):not(.is-idle) { background: var(--color-bg-subtle); }\n/* The border keeps an edge in dark. */\n.lintje-text-editor__tool.is-pressed {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  border-color: var(--color-action-primary-border);\n}\n.lintje-text-editor__tool.is-pressed:hover:not(:disabled) { background: var(--color-action-primary); }\n.lintje-text-editor__tool.is-idle,\n.lintje-text-editor__tool:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n/* --- The surface --------------------------------------------------------- */\n.lintje-text-editor__surface {\n  min-height: 132px;\n  padding: var(--space-3);\n  overflow-wrap: anywhere;\n}\n/* The ring is the frame's, not the surface's. */\n.lintje-text-editor__surface:focus-visible { outline: none; }\n.lintje-text-editor.is-disabled .lintje-text-editor__surface {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n/* The prose sheet colours its headings itself. */\n.lintje-text-editor.is-disabled .lintje-text-editor__surface * { color: inherit; }\n\n/* --- The link field ------------------------------------------------------ */\n.lintje-text-editor__link { width: 280px; max-width: 100%; padding: var(--space-4); }\n\n/* Below 768 px the toolbar scrolls sideways; at 48 px high the hit areas stay whole. */\n@media (max-width: 767px) {\n  .lintje-text-editor__toolbar { flex-wrap: nowrap; overflow-x: auto; }\n}\n\n/* Forced colours drop the fill: the border turns Highlight, 2 px inside the fixed box. */\n@media (forced-colors: active) {\n  .lintje-text-editor__tool.is-pressed { border: 2px solid Highlight; }\n}\n", d = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+function f(e) {
+	let t = (e ?? "").replace(/\p{Cc}/gu, "").trim();
+	if (!t) return null;
+	let n = /^([a-z][a-z0-9+.-]*):/i.exec(t);
+	return n && ![
+		"http",
+		"https",
+		"mailto",
+		"tel"
+	].includes(n[1].toLowerCase()) ? null : t.replace(/ /g, "%20").replace(/\(/g, "%28").replace(/\)/g, "%29");
+}
+var p = /[\\`*_{}[\]()#+\-.!>~|]/;
+function m(e) {
+	let t = "", n = 0;
+	for (; n < e.length;) {
+		let r = e[n];
+		if (r === "\\" && p.test(e[n + 1] ?? "")) t += d(e[n + 1]), n += 2;
+		else if (r === "\n") t += "<br>", n += 1;
+		else {
+			if (e.startsWith("**", n)) {
+				let r = h(e, "**", n + 2);
+				if (r > n + 2) {
+					t += `<strong>${m(e.slice(n + 2, r))}</strong>`, n = r + 2;
+					continue;
+				}
+			}
+			if (r === "*" || r === "_") {
+				let i = h(e, r, n + 1);
+				if (i > n + 1) {
+					t += `<em>${m(e.slice(n + 1, i))}</em>`, n = i + 1;
+					continue;
+				}
+			}
+			if (r === "[") {
+				let r = /^\[((?:\\.|[^\]\\])+)\]\(([^()\s]+)\)/.exec(e.slice(n));
+				if (r) {
+					let e = f(r[2]), i = m(r[1]);
+					t += e ? `<a href="${d(e)}">${i}</a>` : i, n += r[0].length;
+					continue;
+				}
+			}
+			t += d(r), n += 1;
+		}
+	}
+	return t;
+}
+function h(e, t, n) {
+	for (let r = n; r < e.length; r++) if (e[r] === "\\") r += 1;
+	else {
+		if (t === "**" && e.startsWith("**", r)) return r;
+		if (t.length === 1 && e[r] === t) {
+			if (t === "*" && e[r + 1] === "*") {
+				let t = h(e, "**", r + 2);
+				if (t === -1) return -1;
+				r = t + 1;
+				continue;
+			}
+			return r;
+		}
+	}
+	return -1;
+}
+var g = /^#{1,6}\s+(.*)$/, _ = /^[-*]\s+(.*)$/;
+function v(e) {
+	let t = (e ?? "").replace(/\r\n?/g, "\n").split("\n"), n = [], r = [], i = [], a = () => {
+		r.length && n.push(`<p>${m(r.join("\n"))}</p>`), r = [];
+	}, o = () => {
+		i.length && n.push(`<ul>${i.map((e) => `<li>${e}</li>`).join("")}</ul>`), i = [];
+	};
+	for (let e of t) {
+		let t = e.trimEnd(), s = g.exec(t), c = _.exec(t);
+		t.trim() === "" ? (a(), o()) : s ? (a(), o(), n.push(`<h3>${m(s[1].trim())}</h3>`)) : c ? (a(), i.push(m(c[1].trim()))) : (o(), r.push(t.trim()));
+	}
+	return a(), o(), n.join("");
+}
+var y = (e) => e.replace(/([\\*_[\]])/g, "\\$1"), b = (e) => e.replace(/^(\s*)(#|[-*+](?=\s))/, "$1\\$2"), x = /* @__PURE__ */ new Set(/* @__PURE__ */ "ADDRESS.ARTICLE.ASIDE.BLOCKQUOTE.DD.DIV.DL.DT.FIGCAPTION.FIGURE.FOOTER.FORM.HEADER.HR.MAIN.NAV.P.PRE.SECTION.TABLE.TBODY.THEAD.TFOOT.TR.TD.TH".split(".")), S = /* @__PURE__ */ new Set([
+	"H1",
+	"H2",
+	"H3",
+	"H4",
+	"H5",
+	"H6"
+]), C = /* @__PURE__ */ new Set(["UL", "OL"]), w = /* @__PURE__ */ new Set([
+	"SCRIPT",
+	"STYLE",
+	"TEMPLATE",
+	"NOSCRIPT",
+	"IFRAME",
+	"OBJECT",
+	"SVG",
+	"HEAD"
+]), T = (e) => e.nodeType === 1, E = (e) => T(e) && (x.has(e.tagName) || S.has(e.tagName) || C.has(e.tagName) || e.tagName === "LI");
+function D(e) {
+	let t = e.style?.fontWeight ?? "", n = e.style?.fontStyle ?? "";
+	return {
+		bold: t === "" ? void 0 : t === "bold" || Number(t) >= 600,
+		italic: n === "" ? void 0 : n === "italic" || n === "oblique"
+	};
+}
+function O(e, t) {
+	let n = /^(\s*)([\s\S]*?)(\s*)$/.exec(e);
+	return n[2] ? `${n[1]}${t}${n[2]}${t}${n[3]}` : e;
+}
+function k(e) {
+	if (e.nodeType === 3) return y((e.textContent ?? "").replace(/\s+/g, " "));
+	if (!T(e) || w.has(e.tagName)) return "";
+	if (e.tagName === "BR") return "\n";
+	if (e.tagName === "IMG") return y(e.getAttribute("alt") ?? "");
+	let t = [...e.childNodes].map(k).join(""), n = e.tagName, r = D(e), i = r.bold ?? (n === "B" || n === "STRONG"), a = r.italic ?? (n === "I" || n === "EM");
+	if (n === "A") {
+		let n = f(e.getAttribute("href"));
+		n && t.trim() && (t = `[${t.trim()}](${n})`);
+	}
+	return a && (t = O(t, "_")), i && (t = O(t, "**")), t;
+}
+var A = (e) => e.split("\n").map((e) => e.replace(/ {2,}/g, " ").trim()).join("\n").replace(/^\n+|\n+$/g, "");
+function j(e, t) {
+	let n = [], r = () => {
+		let e = A(n.map(k).join(""));
+		e && t.push({
+			kind: "p",
+			text: e
+		}), n = [];
+	};
+	for (let i of e.childNodes) {
+		if (T(i) && w.has(i.tagName)) continue;
+		if (!E(i)) {
+			n.push(i);
+			continue;
+		}
+		r();
+		let e = i;
+		if (S.has(e.tagName)) {
+			let n = A(k(e).replace(/\n/g, " ")).replace(/\*\*/g, "");
+			n && t.push({
+				kind: "h",
+				text: n
+			});
+		} else if (C.has(e.tagName) || e.tagName === "LI") for (let n of e.tagName === "LI" ? [e] : e.querySelectorAll("li")) {
+			let e = A([...n.childNodes].filter((e) => !(T(e) && C.has(e.tagName))).map((e) => E(e) ? ` ${k(e)} ` : k(e)).join(""));
+			e && t.push({
+				kind: "li",
+				text: e.replace(/\n/g, " ")
+			});
+		}
+		else j(e, t);
+	}
+	return r(), t;
+}
+function M(e) {
+	let t = [], n = null;
+	for (let r of j(e, [])) n && t.push(n === "li" && r.kind === "li" ? "\n" : "\n\n"), r.kind === "h" ? t.push(`### ${r.text}`) : r.kind === "li" ? t.push(`- ${r.text}`) : t.push(r.text.split("\n").map(b).join("\n")), n = r.kind;
+	return t.join("");
+}
+function N(e) {
+	return v(M(new DOMParser().parseFromString(e, "text/html").body));
+}
+//#endregion
+//#region src/components/inputs/text-editor/text-editor.ts
+var P = [
+	{
+		format: "bold",
+		label: "Vet",
+		text: "B"
+	},
+	{
+		format: "italic",
+		label: "Cursief",
+		text: "I"
+	},
+	{
+		format: "heading",
+		label: "Kop",
+		text: "H"
+	},
+	{
+		format: "list",
+		label: "Opsomming",
+		text: "Opsomming"
+	},
+	{
+		format: "link",
+		label: "Link",
+		text: "Link"
+	}
+], F = {
+	bold: ["B", "STRONG"],
+	italic: ["I", "EM"],
+	heading: [
+		"H1",
+		"H2",
+		"H3",
+		"H4",
+		"H5",
+		"H6"
+	],
+	list: ["UL", "LI"],
+	link: ["A"]
+};
+function I(e, t) {
+	typeof document.execCommand == "function" && document.execCommand(e, !1, t);
+}
+function L(e, t) {
+	let { startContainer: n, startOffset: r, endContainer: i, endOffset: a } = t;
+	e.setBaseAndExtent(n, r, i, a);
+}
+function R(e) {
+	let { startContainer: t, startOffset: n } = e;
+	if (e.collapsed || t.nodeType !== 3 || n < (t.textContent ?? "").length) return t;
+	let r = document.createTreeWalker(e.commonAncestorContainer, NodeFilter.SHOW_TEXT);
+	return r.currentNode = t, r.nextNode() ?? t;
+}
+var z = class extends s {
+	constructor(...e) {
+		super(...e), this.value = "", this.active = /* @__PURE__ */ new Set(), this.collapsed = !0, this.toolIndex = 0, this.linkOpen = !1, this.linkError = "", this.shown = null, this.range = null, this.onSelectionChange = () => {
+			let e = this.surface, t = this.selectedRange();
+			e && t && e.contains(t.commonAncestorContainer) && (this.range = t.cloneRange(), this.collapsed = t.collapsed, this.active = this.formatsAt(R(t)));
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			i(c),
+			i(l),
+			i(u)
+		];
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			active: { state: !0 },
+			collapsed: { state: !0 },
+			toolIndex: { state: !0 },
+			linkOpen: { state: !0 },
+			linkError: { state: !0 }
+		};
+	}
+	get surface() {
+		return this.renderRoot.querySelector(".lintje-text-editor__surface");
+	}
+	selection() {
+		return this.renderRoot.getSelection?.() ?? document.getSelection();
+	}
+	selectedRange() {
+		let e = this.selection();
+		if (!e?.rangeCount) return null;
+		let t;
+		try {
+			t = e.getComposedRanges?.({ shadowRoots: [this.renderRoot] })[0];
+		} catch {}
+		if (!t) return e.getRangeAt(0);
+		let n = document.createRange();
+		return n.setStart(t.startContainer, t.startOffset), n.setEnd(t.endContainer, t.endOffset), n;
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("selectionchange", this.onSelectionChange);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("selectionchange", this.onSelectionChange), super.disconnectedCallback();
+	}
+	formatsAt(e) {
+		let t = /* @__PURE__ */ new Set(), n = this.surface;
+		for (let r = e; r && r !== n; r = r.parentNode) {
+			if (r.nodeType !== 1) continue;
+			let e = r.tagName;
+			for (let n of P) F[n.format].includes(e) && t.add(n.format);
+		}
+		return t;
+	}
+	updated(e) {
+		super.updated(e);
+		let t = this.surface;
+		t && this.value !== this.shown && (t.innerHTML = v(this.value), this.shown = this.value);
+	}
+	settle(e) {
+		let t = this.surface;
+		if (!t) return;
+		let n = M(t), r = v(n);
+		e && t.innerHTML !== r && (t.innerHTML = r), this.shown = n, n !== this.value && (this.value = n, this.commit(n));
+	}
+	onFocusOut(e) {
+		if (this.disabled) return;
+		let t = e.relatedTarget, n = t !== null && this.renderRoot.contains(t);
+		(e.target === this.surface || !n) && this.settle(!n);
+	}
+	restore() {
+		let e = this.surface, t = this.selection();
+		e && (e.focus(), this.range && t && L(t, this.range));
+	}
+	apply(e) {
+		if (!this.disabled) {
+			if (e === "link") return this.link();
+			this.restore(), I("defaultParagraphSeparator", "p"), e === "bold" && I("bold"), e === "italic" && I("italic"), e === "list" && I("insertUnorderedList"), e === "heading" && I("formatBlock", this.active.has("heading") ? "<p>" : "<h3>"), this.onSelectionChange();
+		}
+	}
+	link() {
+		if (this.active.has("link")) {
+			this.restore();
+			let e = this.selection(), t = this.range ? R(this.range) : null;
+			for (; t && t.tagName !== "A";) t = t.parentNode;
+			if (t && e) {
+				let n = document.createRange();
+				n.selectNodeContents(t), L(e, n);
+			}
+			I("unlink"), this.onSelectionChange();
+		} else this.collapsed || (this.linkError = "", this.linkOpen = !0, this.updateComplete.then(() => this.renderRoot.querySelector(".lintje-text-editor__link-field")?.shadowRoot?.querySelector("input")?.focus()));
+	}
+	onLinkChange(e) {
+		e.stopPropagation();
+		let t = f(e.detail);
+		t ? (this.linkOpen = !1, this.restore(), I("createLink", t), this.onSelectionChange()) : this.linkError = "Vul een webadres in, zoals https://www.rijksoverheid.nl";
+	}
+	onLinkKeydown(e) {
+		e.key === "Enter" && !e.isComposing && e.preventDefault();
+	}
+	onLinkFocusOut(e) {
+		let t = e.relatedTarget, r = e.currentTarget;
+		this.linkOpen && t && !n(t, r) && !n(this, t) && (this.linkOpen = !1);
+	}
+	onLinkClose(e) {
+		e.stopPropagation(), this.linkOpen = !1, this.restore();
+	}
+	onSurfaceKeydown(e) {
+		if (!(e.ctrlKey || e.metaKey) || e.altKey) return;
+		let t = {
+			b: "bold",
+			i: "italic",
+			k: "link"
+		}[e.key.toLowerCase()];
+		t && (e.preventDefault(), this.apply(t));
+	}
+	onPaste(e) {
+		let t = e.clipboardData;
+		if (!t) return;
+		e.preventDefault();
+		let n = t.getData("text/html");
+		n ? I("insertHTML", N(n)) : I("insertText", t.getData("text/plain"));
+	}
+	onToolbarKeydown(e) {
+		let t = P.length - 1, n = {
+			ArrowRight: this.toolIndex === t ? 0 : this.toolIndex + 1,
+			ArrowLeft: this.toolIndex === 0 ? t : this.toolIndex - 1,
+			Home: 0,
+			End: t
+		}[e.key];
+		n !== void 0 && (e.preventDefault(), this.toolIndex = n, this.updateComplete.then(() => {
+			this.renderRoot.querySelectorAll(".lintje-text-editor__tool")[n]?.focus();
+		}));
+	}
+	renderTool(e, t) {
+		let n = this.active.has(e.format), i = e.format === "link" && this.collapsed && !n;
+		return a`<button
+      type="button"
+      class=${o({
+			"lintje-text-editor__tool": !0,
+			[`lintje-text-editor__tool--${e.format}`]: !0,
+			"lintje-text-editor__tool--word": e.text.length > 1,
+			"is-pressed": n,
+			"is-idle": i
+		})}
+      tabindex=${t === this.toolIndex ? "0" : "-1"}
+      aria-label=${e.label}
+      aria-pressed=${n ? "true" : "false"}
+      aria-disabled=${i ? "true" : r}
+      ?disabled=${this.disabled}
+      @mousedown=${(e) => e.preventDefault()}
+      @click=${() => {
+			this.toolIndex = t, this.apply(e.format);
+		}}
+    >
+      ${e.text}
+    </button>`;
+	}
+	render() {
+		return a`<div class="lintje-field" @focusout=${this.onFocusOut}>
+      ${this.renderLabel()}
+      <div
+        class=${o({
+			"lintje-text-editor": !0,
+			"is-error": !!this.error,
+			"is-disabled": this.disabled
+		})}
+      >
+        <div
+          class="lintje-text-editor__toolbar"
+          role="toolbar"
+          aria-label="Opmaak"
+          @keydown=${this.onToolbarKeydown}
+        >
+          ${P.map((e, t) => this.renderTool(e, t))}
+        </div>
+        <lintje-popover
+          ?open=${this.linkOpen}
+          placement="bottom-end"
+          panel-role="dialog"
+          label="Link toevoegen"
+          @lintje-close=${this.onLinkClose}
+          @focusout=${this.onLinkFocusOut}
+        >
+          ${this.linkOpen ? a`<div class="lintje-text-editor__link" @keydown=${this.onLinkKeydown}>
+                <lintje-text-input
+                  class="lintje-text-editor__link-field"
+                  label="Adres van de link"
+                  placeholder="https://"
+                  hint="Enter plaatst de link"
+                  error=${this.linkError || r}
+                  @lintje-change=${this.onLinkChange}
+                ></lintje-text-input>
+              </div>` : r}
+        </lintje-popover>
+        <div
+          id=${this.controlId}
+          class="lintje-text-editor__surface lintje-prose"
+          role="textbox"
+          aria-multiline="true"
+          aria-labelledby=${this.labelId}
+          aria-describedby=${this.describedBy}
+          aria-invalid=${this.error ? "true" : r}
+          aria-required=${this.required ? "true" : r}
+          aria-disabled=${this.disabled ? "true" : r}
+          contenteditable=${this.disabled ? "false" : "true"}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @keydown=${this.onSurfaceKeydown}
+          @paste=${this.onPaste}
+        ></div>
+      </div>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-text-editor", z);
+//#endregion
+export { z as LintjeTextEditor };

package/dist-elements/tag/text-input.d.ts

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

package/dist-elements/tag/text-input.js

@@ -0,0 +1,140 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o } from "../chunks/base-rBLTcEIv.js";
+import { a as s, n as c, t as l } from "../chunks/input-jQVTln7H.js";
+import { t as u } from "../chunks/debounce-JXnLMCcF.js";
+//#region src/components/inputs/text-input/text-input.css?inline
+var d = "/* The text field. */\n\n/* --- Text field ----------------------------------------------------------- */\n.lintje-text-input { position: relative; display: flex; align-items: center; }\n.lintje-text-input__control {\n  width: 100%; height: var(--h-control);\n  padding: 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  border-radius: var(--radius);\n}\n.lintje-text-input__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-text-input__control.is-error { border: 2px solid var(--color-error); }\n/* Read-only: the subtle surface, the strong border, the text still primary. */\n.lintje-text-input__control.is-readonly {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-primary);\n  cursor: default;\n}\n.lintje-text-input__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-text-input--clearable .lintje-text-input__control {\n  padding-right: calc(var(--h-icon-button) + var(--space-1));\n}\n/* The hit area reaches the target height above and below only: sideways it would cover the text. */\n.lintje-text-input__clear {\n  position: absolute; right: var(--space-1);\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-text-input__clear:hover { color: var(--color-text-primary); }\n.lintje-text-input__clear::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n/* --- Search ---------------------------------------------------------------- */\n/* The browser's own clear button and decoration go: the field draws its own cross. */\n.lintje-text-input--search .lintje-text-input__control { padding-left: var(--space-10); }\n.lintje-text-input__search {\n  position: absolute; left: var(--space-3);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n.lintje-text-input__control::-webkit-search-cancel-button,\n.lintje-text-input__control::-webkit-search-decoration { appearance: none; }\n\n/* --- Password -------------------------------------------------------------- */\n.lintje-text-input--password .lintje-text-input__control { border-right: 0; }\n.lintje-text-input__reveal { flex: none; --h-button: var(--h-control); }\n", f = class extends c {
+	constructor(...e) {
+		super(...e), this.value = "", this.placeholder = "", this.clearable = !1, this.stacked = !1, this.type = "text", this.commitOn = "change", this.autocomplete = "", this.revealed = !1, this.typing = new u(this), this.#e = "", this.#t = !1;
+	}
+	static {
+		this.styles = [
+			e,
+			r(l),
+			r(d)
+		];
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			placeholder: { type: String },
+			clearable: { type: Boolean },
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			type: { type: String },
+			commitOn: {
+				type: String,
+				attribute: "commit"
+			},
+			autocomplete: { type: String },
+			revealed: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	get formValue() {
+		return this.value;
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && !this.#t && (this.#e = this.value), this.#t = !1;
+	}
+	send(e) {
+		e !== this.#e && (this.#e = e, this.commit(e));
+	}
+	onInput(e) {
+		this.readonly || (this.#t = !0, this.value = e.target.value, this.commitOn === "input" && this.typing.schedule(() => this.send(this.value)));
+	}
+	change(e) {
+		this.readonly || (this.#t = !0, this.value = e.target.value, this.commitOn === "input" ? this.typing.flush() : this.send(this.value));
+	}
+	onKeydown(e) {
+		e.key === "Enter" && this.commitOn === "input" && !this.readonly && (this.#t = !0, this.value = e.target.value, this.typing.flush()), this.submitOnEnter(e, () => this.change(e)), e.key === "Escape" && this.type === "search" && this.value !== "" && !this.readonly && (e.preventDefault(), e.stopPropagation(), this.clear());
+	}
+	clear() {
+		this.readonly || (this.typing.cancel(), this.value = "", this.send(""), this.nativeControl?.focus());
+	}
+	reveal() {
+		this.revealed = !this.revealed;
+	}
+	renderFoot() {
+		let e = this.error ?? "", t = {
+			hintId: this.hintId,
+			errorId: this.errorId
+		};
+		return this.type === "search" ? i`${e ? s(void 0, e, t) : n}<span
+        id=${this.hintId}
+        class="lintje-field__hint"
+        aria-live="polite"
+        ?hidden=${!this.hint || !!e}
+        >${this.hint ?? ""}</span
+      >` : s(this.hint, e, t);
+	}
+	get inputType() {
+		return this.type === "password" ? this.revealed ? "text" : "password" : this.type === "search" || this.type === "email" ? this.type : "text";
+	}
+	render() {
+		let e = this.type === "search", t = this.type === "password", r = (this.clearable || e) && !t && this.value !== "" && !this.disabled && !this.readonly;
+		return i`<div class="lintje-field">
+      ${this.renderLabel(this.controlId)}
+      <div
+        class=${a({
+			"lintje-text-input": !0,
+			"lintje-text-input--clearable": r,
+			"lintje-text-input--search": e,
+			"lintje-text-input--password": t
+		})}
+      >
+        ${e ? o("functioneel-zoek", {
+			size: 18,
+			className: "lintje-text-input__search"
+		}) : n}
+        <input
+          type=${this.inputType}
+          id=${this.controlId}
+          class=${a({
+			"lintje-text-input__control": !0,
+			"is-error": !!this.error,
+			"is-readonly": this.readonly
+		})}
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          role=${e ? "searchbox" : n}
+          inputmode=${this.type === "email" ? "email" : n}
+          enterkeyhint=${e ? "search" : n}
+          autocomplete=${this.autocomplete || n}
+          aria-labelledby=${this.labelId}
+          aria-describedby=${this.describedBy}
+          aria-invalid=${this.error ? "true" : n}
+          aria-required=${this.required ? "true" : n}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @input=${this.onInput}
+          @change=${this.change}
+          @keydown=${this.onKeydown}
+        />
+        ${r ? i`<button
+              type="button"
+              class="lintje-text-input__clear"
+              aria-label="Wissen"
+              @mousedown=${(e) => e.preventDefault()}
+              @click=${this.clear}
+            >
+              ${o("functioneel-kruis", { size: 16 })}
+            </button>` : n}
+        ${t ? i`<lintje-button
+              class="lintje-text-input__reveal"
+              variant="secondary"
+              ?disabled=${this.disabled}
+              @click=${this.reveal}
+              >${this.revealed ? "Verbergen" : "Tonen"}</lintje-button
+            >` : n}
+      </div>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-text-input", f);
+//#endregion
+export { f as LintjeTextInput };

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

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