lintje 0.1.1

package/dist-elements/tag/textarea.js

@@ -0,0 +1,155 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, ut as o } from "../chunks/base-rBLTcEIv.js";
+import { a as s, i as c, n as l, t as u } from "../chunks/input-jQVTln7H.js";
+import { t as d } from "../chunks/debounce-JXnLMCcF.js";
+//#region src/components/inputs/textarea/textarea.css?inline
+var f = "/* The multi-line text field. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n/* Plain takes the type of where it stands, past the UI type every element sets on itself, and\n   fills the height the surface gives it. */\n:host([variant='plain']) { display: flex; flex-direction: column; font: inherit; }\n/* Below 768 px: the full width, as `stacked`. */\n@media (max-width: 767px) {\n  :host { width: 100%; }\n}\n\n/* --- */\n\n/* `rows` lines at least (three by default); grows with its content up to twelve, then scrolls. */\n.lintje-textarea__control {\n  display: block;\n  width: 100%;\n  min-height: calc(var(--lintje-rows, 3) * 1lh + var(--space-4) + 2px);\n  max-height: calc(12lh + var(--space-4) + 2px);\n  field-sizing: content;\n  padding: var(--space-2) 14px;\n  border: 1px solid var(--color-border-field);\n  border-radius: var(--radius);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: var(--text-body);\n  resize: vertical;\n  overflow-y: auto;\n}\n.lintje-textarea__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n/* The padding gives back the pixel the 2 px error border takes. */\n.lintje-textarea__control.is-error { border: 2px solid var(--color-error); padding: 7px 13px; }\n/* Disabled wins over read-only, read-only over error. */\n.lintje-textarea__control.is-readonly {\n  border: 1px solid var(--color-border-strong);\n  padding: var(--space-2) 14px;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-primary);\n  cursor: default;\n}\n.lintje-textarea__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  padding: var(--space-2) 14px;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Plain: the surface around it is the field, and draws the focus ring around itself, so the\n   ring does not sit tight against the text. It keeps growing; the surface decides the height. */\n:host([variant='plain']) .lintje-field { flex: 1; }\n.lintje-textarea__control--plain { flex: 1; }\n.lintje-textarea__control--plain:focus-visible { outline: none; }\n.lintje-textarea__control--plain,\n.lintje-textarea__control--plain.is-readonly,\n.lintje-textarea__control--plain:disabled {\n  min-height: calc(var(--lintje-rows, 3) * 1lh);\n  max-height: none;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  font: inherit;\n  resize: none;\n}\n.lintje-textarea__control--plain.is-error { padding: 0 0 var(--space-1); border: 0; border-bottom: 2px solid var(--color-error); }\n\n.lintje-textarea__counter {\n  align-self: flex-end;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n.lintje-textarea__counter.is-over { color: var(--color-error-text); font-weight: 700; }\n", p = new Intl.NumberFormat("nl-NL");
+function m(e, t) {
+	return `${p.format(e)} / ${p.format(t)} tekens`;
+}
+function h(e, t) {
+	if (!t || e <= t) return "";
+	let n = e - t;
+	return `Maak de tekst ${p.format(n)} ${n === 1 ? "teken" : "tekens"} korter`;
+}
+function g(e, t) {
+	return e >= t * .9;
+}
+var _ = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("field-sizing", "content"), v = class extends l {
+	constructor(...e) {
+		super(...e), this.value = "", this.placeholder = "", this.commitOn = "change", this.stacked = !1, this.rows = 3, this.variant = "field", this.typing = new d(this), this.#e = "", this.#t = !1, this.#n = !1, this.#r = !1;
+	}
+	static {
+		this.styles = [
+			e,
+			r(u),
+			r(f)
+		];
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			placeholder: { type: String },
+			maxlength: { type: Number },
+			commitOn: {
+				type: String,
+				attribute: "commit"
+			},
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			rows: { type: Number },
+			variant: {
+				type: String,
+				reflect: !0
+			}
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	get counterId() {
+		return "lintje-textarea-counter";
+	}
+	get control() {
+		return this.renderRoot.querySelector(".lintje-textarea__control");
+	}
+	get formValue() {
+		return this.value;
+	}
+	get message() {
+		return this.error || h(this.value.length, this.maxlength);
+	}
+	get footMessage() {
+		return this.message;
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && !this.#t && (this.#e = this.value), this.#t = !1;
+		let t = !this.error && h(this.value.length, this.maxlength) !== "";
+		this.#r = t && !this.#n, this.#n = t;
+	}
+	send(e) {
+		e !== this.#e && (this.#e = e, this.commit(e));
+	}
+	take(e) {
+		this.#t = !0, this.value = e.target.value;
+	}
+	onInput(e) {
+		this.readonly || (this.take(e), this.commitOn === "input" && this.typing.schedule(() => this.send(this.value)));
+	}
+	onChange(e) {
+		this.readonly || (this.take(e), this.commitOn === "input" ? this.typing.flush() : this.send(this.value));
+	}
+	onKeydown(e) {
+		e.key === "Enter" && (e.ctrlKey || e.metaKey) && !this.readonly && this.submitOnEnter(e, () => {
+			this.take(e), this.commitOn === "input" ? this.typing.flush() : this.send(this.value);
+		});
+	}
+	updated(e) {
+		if (super.updated(e), _ || !e.has("value")) return;
+		let t = this.control;
+		t && t.isConnected && (t.style.height = "auto", t.style.height = `${t.scrollHeight + t.offsetHeight - t.clientHeight}px`);
+	}
+	get describedBy() {
+		let e = c(this.hint, this.footMessage, {
+			hintId: this.hintId,
+			errorId: this.errorId
+		});
+		return [e === n ? "" : e, this.counterShown ? this.counterId : ""].filter(Boolean).join(" ") || n;
+	}
+	get counterShown() {
+		return !!this.maxlength && !this.disabled;
+	}
+	renderFoot() {
+		let e = s(this.hint, this.footMessage, {
+			hintId: this.hintId,
+			errorId: this.errorId
+		}, !this.#n || this.#r);
+		if (!this.counterShown) return e;
+		let t = this.maxlength, n = this.value.length;
+		return i`${e}<span
+        id=${this.counterId}
+        part="counter"
+        class=${a({
+			"lintje-textarea__counter": !0,
+			"is-over": n > t
+		})}
+        aria-live=${g(n, t) ? "polite" : "off"}
+        >${m(n, t)}</span
+      >`;
+	}
+	render() {
+		let e = this.message;
+		return i`<div class="lintje-field">
+      ${this.renderLabel(this.controlId)}
+      <textarea
+        id=${this.controlId}
+        class=${a({
+			"lintje-textarea__control": !0,
+			"lintje-textarea__control--plain": this.variant === "plain",
+			"is-error": !!e,
+			"is-readonly": this.readonly
+		})}
+        rows=${this.rows}
+        ${o({ "--lintje-rows": this.rows })}
+        .value=${this.value}
+        placeholder=${this.placeholder || n}
+        aria-labelledby=${this.labelId}
+        aria-describedby=${this.describedBy}
+        aria-invalid=${e ? "true" : n}
+        aria-required=${this.required ? "true" : n}
+        ?required=${this.required}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        @input=${this.onInput}
+        @change=${this.onChange}
+        @keydown=${this.onKeydown}
+      ></textarea>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-textarea", v);
+//#endregion
+export { v as LintjeTextarea, g as counterSpeaks, m as counterText, h as limitMessage };

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

@@ -0,0 +1 @@
+export * from '../types/primitives/tile/tile.js'

package/dist-elements/tag/tile.js

@@ -0,0 +1 @@
+export { x as LintjeTile } from "../chunks/base-rBLTcEIv.js";

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

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

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

@@ -0,0 +1,144 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o, f as s } from "../chunks/base-rBLTcEIv.js";
+import { r as c, t as l } from "../chunks/input-jQVTln7H.js";
+//#region src/components/inputs/time-input/time-input.css?inline
+var u = ":host {\n  display: block;\n  min-width: 0;\n  width: 120px;\n}\n:host([hidden]) { display: none; }\n:host([stacked]) {\n  width: 100%;\n  --h-control: var(--h-touch);\n}\n@media (max-width: 767px) {\n  :host {\n    width: 100%;\n    --h-control: var(--h-touch);\n  }\n}\n\n/* --- */\n\n.lintje-time-input { position: relative; display: flex; align-items: center; }\n.lintje-time-input__control {\n  width: 100%; height: var(--h-control);\n  padding: 0 var(--space-10) 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  font-variant-numeric: tabular-nums;\n  border-radius: var(--radius);\n}\n.lintje-time-input__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-time-input__control.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-time-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/* A sign, not a button: the pointer goes through it to the field. */\n.lintje-time-input__icon {\n  position: absolute; right: var(--space-3);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n.lintje-time-input__control:disabled + .lintje-time-input__icon { color: var(--color-text-disabled); }\n", d = 1440, f = /^(\d{1,2})[:.](\d{2})$/, p = /^\d{1,4}$/, m = /^(\d{2}):(\d{2})$/, h = (e) => String(e).padStart(2, "0");
+function g(e, t) {
+	return !Number.isInteger(e) || !Number.isInteger(t) || e < 0 || e > 23 || t < 0 || t > 59 ? null : `${h(e)}:${h(t)}`;
+}
+function _(e) {
+	let t = e ? m.exec(e) : null;
+	if (!t) return null;
+	let [n, r] = [Number(t[1]), Number(t[2])];
+	return g(n, r) ? n * 60 + r : null;
+}
+var v = (e) => _(e) !== null;
+function y(e) {
+	let t = (e % d + d) % d;
+	return `${h(Math.floor(t / 60))}:${h(t % 60)}`;
+}
+function b(e) {
+	let t = e.trim();
+	if (t === "") return { kind: "empty" };
+	let n, r, i = f.exec(t);
+	if (i) n = Number(i[1]), r = Number(i[2]);
+	else if (p.test(t)) {
+		let e = t.length <= 2 ? `${t}00` : t;
+		n = Number(e.slice(0, -2)), r = Number(e.slice(-2));
+	} else return { kind: "invalid" };
+	let a = g(n, r);
+	return a ? {
+		kind: "ok",
+		time: a
+	} : { kind: "invalid" };
+}
+function x(e, t) {
+	return y((_(e) ?? 0) + t);
+}
+function S(e, t = /* @__PURE__ */ new Date()) {
+	let n = t.getHours() * 60 + t.getMinutes(), r = e > 0 ? e : 1;
+	return y(Math.round(n / r) * r);
+}
+function C(e, t, n) {
+	return v(t) && e < t ? t : v(n) && e > n ? n : e;
+}
+//#endregion
+//#region src/components/inputs/time-input/time-input.ts
+var w = class extends c {
+	constructor(...e) {
+		super(...e), this.value = null, this.step = 15, this.placeholder = "", this.stacked = !1, this.hint = "uu:mm", this.text = "", this.problem = "";
+	}
+	static {
+		this.styles = [
+			e,
+			r(l),
+			r(u)
+		];
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			min: { type: String },
+			max: { type: String },
+			step: { type: Number },
+			placeholder: { type: String },
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			text: { state: !0 },
+			problem: { state: !0 }
+		};
+	}
+	get message() {
+		return this.error || this.problem;
+	}
+	get footMessage() {
+		return this.message;
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && (this.text = v(this.value) ? this.value : "", this.problem = "");
+	}
+	outOfBounds(e) {
+		return v(this.min) && e < this.min ? `Kies een tijd op of na ${this.min}` : v(this.max) && e > this.max ? `Kies een tijd op of voor ${this.max}` : "";
+	}
+	choose(e) {
+		this.problem = "", this.text = e ?? "", e !== this.value && (this.value = e, this.commit(e));
+	}
+	onChange(e) {
+		let t = e.target.value, n = b(t);
+		if (n.kind === "empty") return this.choose(null);
+		if (this.text = t, n.kind === "invalid") {
+			this.problem = "Vul een tijd in als uu:mm";
+			return;
+		}
+		let r = this.outOfBounds(n.time);
+		r ? this.problem = r : this.choose(n.time);
+	}
+	onKeydown(e) {
+		let t = {
+			ArrowUp: 1,
+			ArrowDown: -1,
+			PageUp: this.step,
+			PageDown: -this.step
+		}[e.key];
+		if (t === void 0) return;
+		e.preventDefault();
+		let n = b(e.target.value), r = n.kind === "ok" ? n.time : this.value, i = r === null ? S(this.step) : x(r, t);
+		this.choose(C(i, this.min, this.max));
+	}
+	render() {
+		let e = this.message;
+		return i`<div class="lintje-field">
+      ${this.renderLabel(this.controlId)}
+      <div class="lintje-time-input">
+        <input
+          type="text"
+          id=${this.controlId}
+          inputmode="numeric"
+          autocomplete="off"
+          class=${a({
+			"lintje-time-input__control": !0,
+			"is-error": !!e
+		})}
+          .value=${s(this.text)}
+          placeholder=${this.placeholder || n}
+          aria-labelledby=${this.labelId}
+          aria-describedby=${this.describedBy}
+          aria-invalid=${e ? "true" : n}
+          aria-required=${this.required ? "true" : n}
+          ?disabled=${this.disabled}
+          @change=${this.onChange}
+          @keydown=${this.onKeydown}
+        />
+        ${o("functioneel-klok", {
+			size: 18,
+			className: "lintje-time-input__icon"
+		})}
+      </div>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-time-input", w);
+//#endregion
+export { w as LintjeTimeInput };

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

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

package/dist-elements/tag/toast.js

@@ -0,0 +1,106 @@
+import { $ as e, Bt as t, Gt as n, H as r, Ht as i, Kt as a, U as o, W as s, et as c, zt as l } from "../chunks/base-rBLTcEIv.js";
+import "../chunks/focus-trap-w3vCamJ6.js";
+//#region src/components/feedback/toast/toast.css?inline
+var u = ":host {\n  display: contents;\n}\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-toast {\n  position: fixed;\n  right: var(--space-6);\n  bottom: var(--space-6);\n  z-index: 70;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  min-width: 320px;\n  max-width: 480px;\n  font: var(--text-ui);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-toast) var(--ease-in-motion);\n}\n.lintje-toast--ok   { background: var(--color-success-bg); color: var(--color-text-primary); }\n.lintje-toast--error { background: var(--color-error-bg);   color: var(--color-text-primary); }\n\n.lintje-toast__icon { flex: none; display: flex; }\n.lintje-toast--ok    .lintje-toast__icon { color: var(--color-success-line); }\n.lintje-toast--error .lintje-toast__icon { color: var(--color-error-line); }\n\n.lintje-toast__text { flex: 1; }\n.lintje-toast__action { position: relative; font-weight: 700; text-decoration: underline; color: var(--color-link-on-status); flex: none; }\n/* The close and the action reach the target height through a transparent hit area; the gap\n   between them keeps the hit areas apart. */\n.lintje-toast__close {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  color: var(--color-text-muted);\n  display: flex; align-items: center; justify-content: center; flex: none;\n}\n.lintje-toast__close::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n.lintje-toast__action::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n@media (max-width: 767px) {\n  .lintje-toast { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); min-width: 0; max-width: none; }\n}\n\n/* Forced colours: the fill and shadow are dropped, so the toast takes a CanvasText line. */\n@media (forced-colors: active) {\n  .lintje-toast { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n", d = 6e3;
+function f(e) {
+	for (let t = e.getRootNode();;) {
+		let e = t.querySelector?.("main");
+		if (e) return e;
+		if (!(t instanceof ShadowRoot)) return null;
+		t = t.host.getRootNode();
+	}
+}
+var p = class extends l {
+	static {
+		this.styles = [e, i(u)];
+	}
+	static {
+		this.properties = {
+			kind: {
+				type: String,
+				reflect: !0
+			},
+			action: { type: String },
+			filled: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	constructor() {
+		super(), this.kind = "ok", this.filled = !1, this.#e = !1, this.#t = !1, this.#n = 0, this.#r = 0, this.#i = null, this.#a = (e) => {
+			e.key === "Escape" && s(this) && this.#u();
+		}, this.#o = () => {
+			let e = o(this);
+			e || (this.#i = r()), this.#l("focus", e);
+		}, this.#s = (e) => {
+			let t = e.relatedTarget;
+			(!t || t !== this && !this.contains(t)) && this.#l("focus", !1);
+		}, this.addEventListener("focusout", this.#s);
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("keydown", this.#a), document.addEventListener("focusin", this.#o), this.#i = r(), this.#c(), !this.filled && !this.#r && (this.#r = requestAnimationFrame(() => {
+			this.#r = 0, this.filled = !0;
+		}));
+	}
+	disconnectedCallback() {
+		document.removeEventListener("keydown", this.#a), document.removeEventListener("focusin", this.#o), clearTimeout(this.#n), this.#r && cancelAnimationFrame(this.#r), this.#r = 0, super.disconnectedCallback();
+	}
+	updated(e) {
+		(e.has("kind") || e.has("action")) && this.#c();
+	}
+	#c() {
+		clearTimeout(this.#n), !(this.kind === "error" || this.action || this.#e || this.#t) && (this.#n = window.setTimeout(() => this.#u(), d));
+	}
+	#l(e, t) {
+		let n = this.#e || this.#t;
+		e === "pointer" ? this.#e = t : this.#t = t, this.#e || this.#t ? clearTimeout(this.#n) : n && this.#c();
+	}
+	#u() {
+		if (o(this)) {
+			let e = this.#i;
+			(e?.isConnected && e !== document.body ? e : f(this))?.focus();
+		}
+		this.emit("lintje-close");
+	}
+	render() {
+		return a`<div
+      class="lintje-toast lintje-toast--${this.kind}"
+      role="status"
+      aria-live="polite"
+      @mouseenter=${() => this.#l("pointer", !0)}
+      @mouseleave=${() => this.#l("pointer", !1)}
+    >
+      ${this.filled ? this.content() : n}
+    </div>`;
+	}
+	content() {
+		return a`<span class="lintje-toast__icon" aria-hidden="true"
+        >${c(this.kind === "ok" ? "functioneel-cirkel-vinkje" : "functioneel-foutmelding", { size: 16 })}</span
+      >
+      <span class="lintje-toast__text"><slot></slot></span>
+      ${this.action ? a`<button
+            type="button"
+            class="lintje-toast__action"
+            @click=${() => this.emit("lintje-action")}
+          >
+            ${this.action}
+          </button>` : n}
+      <button
+        type="button"
+        class="lintje-toast__close"
+        aria-label="Melding sluiten"
+        @click=${() => this.#u()}
+      >
+        ${c("functioneel-kruis", { size: 16 })}
+      </button>`;
+	}
+};
+t("lintje-toast", p);
+//#endregion
+export { p as LintjeToast };

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

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

package/dist-elements/tag/toggle.js

@@ -0,0 +1,55 @@
+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/toggle/toggle.ts
+var c = class extends o {
+	constructor(...e) {
+		super(...e), this.checked = !1;
+	}
+	static {
+		this.styles = [e, r(s)];
+	}
+	static {
+		this.properties = { checked: {
+			type: Boolean,
+			reflect: !0
+		} };
+	}
+	change(e) {
+		this.checked = e.target.checked, this.commit(this.checked);
+	}
+	render() {
+		return i`<div class="lintje-field">
+      <label class=${a({
+			"lintje-choice": !0,
+			"is-disabled": this.disabled
+		})}>
+        <input
+          type="checkbox"
+          role="switch"
+          class="lintje-choice__input"
+          .checked=${this.checked}
+          aria-describedby=${this.describedBy}
+          aria-invalid=${this.error ? "true" : n}
+          ?disabled=${this.disabled}
+          @change=${this.change}
+        />
+        <span class="lintje-choice__switch" aria-hidden="true">
+          <span class="lintje-choice__knob"></span>
+        </span>
+        <span
+          class=${a({
+			"lintje-choice__label": !0,
+			"is-modified": this.modified && !this.hideLabel,
+			"visually-hidden": this.hideLabel
+		})}
+          >${this.label} ${this.renderLabelSuffix()}</span
+        >
+        ${this.modified && !this.hideLabel ? i`<span class="lintje-label__dot"><span class="visually-hidden">afwijkend van standaard</span></span>` : n}
+      </label>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-toggle", c);
+//#endregion
+export { c as LintjeToggle };

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

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

package/dist-elements/tag/toggletip.js

@@ -0,0 +1,119 @@
+import { $ as e, Bt as t, G as n, Gt as r, Ht as i, Kt as a, R as o, W as s, Z as c, et as l, j as u, ut as d, z as f, zt as p } from "../chunks/base-rBLTcEIv.js";
+import "../chunks/focus-trap-w3vCamJ6.js";
+//#region src/components/overlays/toggletip/toggletip.css?inline
+var m = "/* The trigger is the icon button's drawing (`icon-button.css`); what stands here is the popover. */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Closed, the `role=\"status\"` region is empty and `.visually-hidden`, never `display: none`:\n   a region that appeared together with its text would not be announced. */\n\n/* Fixed to the viewport, so a scrolling tile or table cannot cut it off. It stands on the\n   popover's layer (85): above a modal's or a drawer's scrim, under the tooltip (90). */\n.lintje-toggletip__popover.is-open {\n  position: fixed;\n  z-index: 85;\n  min-width: min(12rem, calc(100vw - 2 * var(--space-2)));\n  max-width: min(20rem, calc(100vw - 2 * var(--space-2)));\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-popover);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n  text-align: start;\n  white-space: normal;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n", h = 4, g = 0, _ = class extends p {
+	static {
+		this.styles = [
+			e,
+			i(u),
+			i(m)
+		];
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			placement: {
+				type: String,
+				reflect: !0
+			},
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			spot: { state: !0 }
+		};
+	}
+	get trigger() {
+		return this.renderRoot.querySelector(".lintje-toggletip__trigger");
+	}
+	setOpen(e) {
+		this.open !== e && (this.open = e, this.emit("lintje-toggle", { open: e }));
+	}
+	constructor() {
+		super(), this.label = "Toelichting", this.placement = "bottom-start", this.open = !1, this.spot = null, this.popoverId = `lintje-toggletip-${++g}`, this.reflowFrame = 0, this.onOutsideClick = (e) => {
+			this.open && !e.composedPath().includes(this) && this.setOpen(!1);
+		}, this.onEscape = (e) => {
+			if (!this.open || e.key !== "Escape" || !s(this)) return;
+			e.stopPropagation();
+			let t = e.composedPath().includes(this);
+			this.setOpen(!1), t && this.trigger?.focus();
+		}, this.onFocusout = (e) => {
+			let t = e.relatedTarget;
+			this.open && t && (n(t, this) || n(this, t) || this.setOpen(!1));
+		}, this.onReflow = () => {
+			this.open && !this.reflowFrame && (this.reflowFrame = requestAnimationFrame(() => {
+				this.reflowFrame = 0, this.measure();
+			}));
+		}, this.addEventListener("focusout", this.onFocusout);
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("mousedown", this.onOutsideClick), document.addEventListener("keydown", this.onEscape, !0), window.addEventListener("scroll", this.onReflow, {
+			capture: !0,
+			passive: !0
+		}), window.addEventListener("resize", this.onReflow);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("mousedown", this.onOutsideClick), document.removeEventListener("keydown", this.onEscape, !0), window.removeEventListener("scroll", this.onReflow, { capture: !0 }), window.removeEventListener("resize", this.onReflow), this.reflowFrame && cancelAnimationFrame(this.reflowFrame), this.reflowFrame = 0, super.disconnectedCallback();
+	}
+	measure() {
+		let e = this.trigger, t = this.renderRoot.querySelector(".lintje-toggletip__popover");
+		if (!e || !t) return;
+		let n = {
+			width: t.offsetWidth,
+			height: t.offsetHeight
+		}, r = o(e.getBoundingClientRect(), n, f(), this.placement, h), i = this.spot;
+		i && i.top === r.top && i.bottom === r.bottom && i.left === r.left || (this.spot = r);
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("open") && !this.open && (this.spot = null);
+	}
+	updated(e) {
+		this.open && (e.has("open") || e.has("placement")) && this.measure();
+	}
+	spotStyle() {
+		let e = this.spot;
+		return e ? {
+			top: e.top === null ? null : `${e.top}px`,
+			bottom: e.bottom === null ? null : `${e.bottom}px`,
+			left: `${e.left}px`
+		} : {
+			top: null,
+			bottom: null,
+			left: "8px"
+		};
+	}
+	render() {
+		let e = l("functioneel-info", { size: 16 }), t = e === r;
+		return a`<button
+        type="button"
+        class=${c({
+			"lintje-icon-button": !0,
+			"lintje-icon-button--flat": !0,
+			"lintje-icon-button--text": t,
+			"lintje-toggletip__trigger": !0
+		})}
+        title=${this.label}
+        aria-label=${this.label}
+        aria-expanded=${String(this.open)}
+        aria-controls=${this.popoverId}
+        @click=${() => this.setOpen(!this.open)}
+      >
+        ${t ? a`<span class="lintje-icon-button__label">${this.label}</span>` : e}
+      </button>
+      <div
+        id=${this.popoverId}
+        class=${c({
+			"lintje-toggletip__popover": !0,
+			"is-open": this.open,
+			"visually-hidden": !this.open
+		})}
+        role="status"
+        ${d(this.open ? this.spotStyle() : {})}
+      >
+        ${this.open ? a`<slot></slot>` : r}
+      </div>`;
+	}
+};
+t("lintje-toggletip", _);
+//#endregion
+export { _ as LintjeToggletip };

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

@@ -0,0 +1 @@
+export * from '../types/primitives/tooltip/tooltip.js'

package/dist-elements/tag/tooltip.js

@@ -0,0 +1 @@
+export { M as LintjeTooltip, N as TOOLTIP_DELAY, P as TOOLTIP_LINGER } from "../chunks/base-rBLTcEIv.js";

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

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