lintje 0.1.1

package/dist-elements/tag/stepper.js

@@ -0,0 +1,130 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Kt as o, Lt as s, Z as c, et as l, zt as u } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/forms/stepper/stepper.css?inline
+var d = "/* The host is the full width of where it stands: what the steps are measured against. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-stepper { font: var(--text-ui); color: var(--color-text-primary); }\n\n/* The row never wraps: its overflow is what tells the element to stand the steps up. */\n.lintje-stepper__list { display: flex; }\n.lintje-stepper__list--row { flex-direction: row; gap: var(--space-2); overflow: hidden; }\n.lintje-stepper__list--column { flex-direction: column; }\n\n/* The label's line is as tall as the pointer target: the row's `overflow: hidden` would cut off more. */\n.lintje-stepper__step {\n  position: relative;\n  display: flex; align-items: flex-start; gap: var(--space-3);\n  flex: none;\n}\n.lintje-stepper__list--row .lintje-stepper__step { flex: 1 1 auto; white-space: nowrap; }\n.lintje-stepper__list--row .lintje-stepper__step:last-child { flex: none; }\n.lintje-stepper__list--column .lintje-stepper__step:not(:last-child) { padding-bottom: var(--space-4); }\n\n/* The line to the next step: drawn through from a done step, dashed from the current one on. */\n.lintje-stepper__line { border: 0 dashed var(--color-border-heavy); }\n.lintje-stepper__step--done .lintje-stepper__line { border-style: solid; border-color: var(--color-accent-line); }\n/* In the row the line fills the room up to the next marker. */\n.lintje-stepper__list--row .lintje-stepper__body { flex: 1 1 auto; }\n.lintje-stepper__list--row .lintje-stepper__line {\n  flex: 1 1 0;\n  min-width: var(--space-8);\n  border-top-width: 2px;\n}\n/* In the column it runs from the marker's foot to the top of the next one. */\n.lintje-stepper__list--column .lintje-stepper__line {\n  position: absolute;\n  top: calc((var(--h-target) + var(--h-chip-field)) / 2);\n  bottom: calc((var(--h-chip-field) - var(--h-target)) / 2);\n  left: calc(var(--h-chip-field) / 2 - 1px);\n  border-left-width: 2px;\n}\n\n.lintje-stepper__body { display: flex; flex-direction: column; }\n.lintje-stepper__list--column .lintje-stepper__body { min-width: 0; }\n.lintje-stepper__head {\n  display: flex; align-items: center; gap: var(--space-2);\n  min-height: var(--h-target);\n}\n/* What stands under the label starts level with the marker's foot. */\n.lintje-stepper__head + .lintje-stepper__description,\n.lintje-stepper__head + .lintje-stepper__meta { margin-top: calc((var(--h-chip-field) - var(--h-target)) / 2); }\n.lintje-stepper__description { margin: 0 0 var(--space-1); color: var(--color-text-secondary); }\n.lintje-stepper__meta { font: var(--text-meta); color: var(--color-text-secondary); }\n\n.lintje-stepper__marker {\n  display: inline-flex; align-items: center; justify-content: center;\n  flex: none;\n  width: var(--h-chip-field); height: var(--h-chip-field);\n  margin-top: calc((var(--h-target) - var(--h-chip-field)) / 2);\n  border: 1px solid transparent;\n  font-size: 0.875rem; font-weight: 700;\n}\n.lintje-stepper__marker--next { border-color: var(--color-text-muted); color: var(--color-text-muted); font-weight: 400; }\n.lintje-stepper__step--next .lintje-stepper__name { color: var(--color-text-muted); }\n.lintje-stepper__marker--current {\n  background: var(--color-action-primary);\n  border-color: var(--color-action-primary-border);\n  color: var(--color-action-primary-text);\n}\n.lintje-stepper__step--current .lintje-stepper__name { font-weight: 700; }\n/* Done: the frame is a line (3:1), the check stands for a word (4.5:1). */\n.lintje-stepper__marker--done { border-color: var(--color-accent-line); color: var(--color-accent-text); }\n.lintje-stepper__marker--done.is-error { border-color: var(--color-error); color: var(--color-error); }\n\n.lintje-stepper__name--link {\n  position: relative;\n  color: var(--color-link);\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-stepper__name--link::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-stepper__name--link:hover { color: var(--color-link-hover); }\n\n.lintje-stepper__errors { font: var(--text-meta); font-weight: 700; color: var(--color-error-text); }\n\n.lintje-stepper--phone { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-stepper__summary {\n  display: flex; justify-content: space-between; gap: var(--space-3);\n}\n.lintje-stepper__current { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lintje-stepper__count { flex: none; color: var(--color-text-muted); }\n\n/* Forced colours: the current step's fill is dropped, so its border turns Highlight. */\n@media (forced-colors: active) {\n  .lintje-stepper__marker--current { border-color: Highlight; }\n}\n";
+//#endregion
+//#region src/components/forms/stepper/stepper.ts
+function f(e) {
+	return e === 1 ? "1 fout" : `${e} fouten`;
+}
+function p(e) {
+	let t = e.length, n = e.findIndex((e) => e.state === "current"), r = n < 0 ? e.filter((e) => e.state === "done").length : n + 1;
+	return {
+		place: r,
+		total: t,
+		percent: t ? Math.round(r / t * 100) : 0
+	};
+}
+function m(e, t, n, r) {
+	return e === "row" ? n > t ? "column" : "row" : r > 0 && r <= t ? "row" : "column";
+}
+var h = {
+	done: "gedaan",
+	current: "huidige stap",
+	next: "nog niet aan de beurt"
+}, g = class extends u {
+	constructor(...e) {
+		super(...e), this.steps = [], this.label = "Stappen", this.orientation = "horizontal", this.layout = "row", this.#e = new s(this, a), this.#t = null, this.#n = 0;
+	}
+	static {
+		this.styles = [e, r(d)];
+	}
+	static {
+		this.properties = {
+			steps: { attribute: !1 },
+			label: { type: String },
+			orientation: { type: String },
+			layout: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	connectedCallback() {
+		super.connectedCallback(), typeof ResizeObserver < "u" && (this.#t = new ResizeObserver(() => this.fit()), this.#t.observe(this));
+	}
+	disconnectedCallback() {
+		this.#t?.disconnect(), this.#t = null, super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("orientation") && (this.layout = this.vertical ? "column" : "row");
+	}
+	updated(e) {
+		super.updated(e), this.fit();
+	}
+	get vertical() {
+		return this.orientation === "vertical";
+	}
+	fit() {
+		if (this.vertical) return;
+		let e = this.renderRoot.querySelector(".lintje-stepper__list");
+		if (!e) return;
+		let t = 0;
+		for (let n of e.querySelectorAll(".lintje-stepper__line")) t += n.offsetWidth - (parseFloat(getComputedStyle(n).minWidth) || 0);
+		let n = e.scrollWidth - t;
+		this.layout === "row" && (this.#n = n);
+		let r = m(this.layout, e.clientWidth, n, this.#n);
+		r !== this.layout && (this.layout = r);
+	}
+	follow(e, t) {
+		i(e) && this.followLink(t, e);
+	}
+	renderMarker(e, t) {
+		let n = e.state === "done" && !!e.errors, r = c({
+			"lintje-stepper__marker": !0,
+			[`lintje-stepper__marker--${e.state}`]: !0,
+			"is-error": n
+		}), i = String(t + 1);
+		return e.state === "done" && (i = l(n ? "functioneel-waarschuwing" : "functioneel-vinkje", { size: 16 })), o`<span class=${r} aria-hidden="true">${i}</span>`;
+	}
+	renderName(e) {
+		if (e.state === "done" && e.href) {
+			let t = e.href;
+			return o`<a
+        class="lintje-stepper__name lintje-stepper__name--link"
+        href=${t}
+        @click=${(e) => this.follow(e, t)}
+        >${e.label}<span class="visually-hidden">, ${h.done}</span></a
+      >`;
+		}
+		return o`<span class="lintje-stepper__name"
+      >${e.label}<span class="visually-hidden">, ${h[e.state]}</span></span
+    >`;
+	}
+	renderBody(e, t) {
+		let r = this.layout === "column" ? e.description : void 0;
+		return o`<div class="lintje-stepper__body">
+      <div class="lintje-stepper__head">
+        ${this.renderName(e)}${e.state === "done" && e.errors ? o`<span class="lintje-stepper__errors">${f(e.errors)}</span>` : n}${t ? n : o`<span class="lintje-stepper__line"></span>`}
+      </div>
+      ${r ? o`<p class="lintje-stepper__description">${r}</p>` : n}${e.meta ? o`<span class="lintje-stepper__meta">${e.meta}</span>` : n}
+    </div>`;
+	}
+	renderPhone() {
+		let { place: e, total: t, percent: n } = p(this.steps), r = this.steps[e - 1], i = `Stap ${e} van ${t}`;
+		return o`<nav class="lintje-stepper lintje-stepper--phone" aria-label=${this.label}>
+      <div class="lintje-stepper__summary">
+        <strong class="lintje-stepper__current">${r?.label ?? ""}</strong>
+        <span class="lintje-stepper__count">${i}</span>
+      </div>
+      <lintje-progress-bar hide-label label=${i} value=${n}></lintje-progress-bar>
+    </nav>`;
+	}
+	render() {
+		return this.#e.matches && !this.vertical ? this.renderPhone() : o`<nav class="lintje-stepper" aria-label=${this.label}>
+      <ol class="lintje-stepper__list lintje-stepper__list--${this.layout}">
+        ${this.steps.map((e, t) => o`<li
+            class=${c({
+			"lintje-stepper__step": !0,
+			[`lintje-stepper__step--${e.state}`]: !0
+		})}
+            aria-current=${e.state === "current" ? "step" : n}
+          >
+            ${this.renderMarker(e, t)}${this.renderBody(e, t === this.steps.length - 1)}
+          </li>`)}
+      </ol>
+    </nav>`;
+	}
+};
+t("lintje-stepper", g);
+//#endregion
+export { g as LintjeStepper, m as chooseLayout, f as errorText, p as position };

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

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

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

@@ -0,0 +1,116 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, U as i, Z as a, zt as o } from "../chunks/base-rBLTcEIv.js";
+import { t as s } from "../chunks/sentence-end-8jlqKJ5P.js";
+//#region src/components/feedback/streaming-text/streaming-text.css?inline
+var c = ":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. */\n:host([variant='plain']) { font: inherit; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-streaming-text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }\n\n.lintje-streaming-text__box {\n  padding: var(--space-3);\n  background: var(--color-bg-page);\n  border: 1px solid var(--color-border-default);\n  font: var(--text-body);\n  color: var(--color-text-primary);\n  overflow-wrap: anywhere;\n}\n/* Keeps a line break the server sends; slotted prose keeps its own rules. */\n.lintje-streaming-text__plain { white-space: pre-wrap; }\n.lintje-streaming-text__box--waiting {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  font: var(--text-ui);\n}\n.lintje-streaming-text__waiting { color: var(--color-text-muted); }\n\n.lintje-streaming-text__caret {\n  display: inline-block;\n  width: 8px;\n  height: 18px;\n  margin-left: var(--space-1);\n  vertical-align: text-bottom;\n  background: var(--color-accent-line);\n  animation: lintje-caret-blink var(--dur-skeleton) steps(1, end) infinite;\n}\n/* A keyframe only works in the root that uses it. */\n@keyframes lintje-caret-blink {\n  0%   { opacity: 1; }\n  50%  { opacity: 0; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lintje-streaming-text__caret { animation: none; }\n}\n\n/* Plain: the surface around it is the box. */\n.lintje-streaming-text--plain .lintje-streaming-text__box {\n  padding: 0;\n  background: transparent;\n  border: 0;\n  font: inherit;\n}\n.lintje-streaming-text--plain .lintje-streaming-text__box--waiting { font: var(--text-ui); }\n\n.lintje-streaming-text__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.lintje-streaming-text__note { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-streaming-text__note--error { font: var(--text-meta); font-weight: 700; color: var(--color-error-text); }\n", l = "Gestopt", u = "De verbinding viel weg. De tekst is niet af.", d = class extends o {
+	constructor(...e) {
+		super(...e), this.text = "", this.state = "waiting", this.label = "Bezig met schrijven", this.variant = "box", this.spoken = [], this.said = 0, this.focusRetry = !1;
+	}
+	static {
+		this.styles = n(c);
+	}
+	static {
+		this.properties = {
+			text: { type: String },
+			state: {
+				type: String,
+				reflect: !0
+			},
+			message: { type: String },
+			label: { type: String },
+			variant: {
+				type: String,
+				reflect: !0
+			},
+			spoken: { state: !0 }
+		};
+	}
+	get ended() {
+		return this.state === "done" || this.state === "stopped" || this.state === "error";
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), e.get("state") === "streaming" && this.ended) {
+			let e = this.renderRoot.querySelector(".lintje-streaming-text__stop");
+			e && i(e) && (this.focusRetry = !0);
+		}
+		if (!e.has("text") && !e.has("state") && !e.has("message")) return;
+		let t = e.get("text") ?? "", n = e.has("text") && !this.text.startsWith(t) || e.has("state") && this.state === "waiting", r = n ? [] : [...this.spoken];
+		n && (this.said = 0);
+		let a = this.text.slice(this.said), o = this.ended ? a.length : s(a);
+		if (o > 0) {
+			let e = a.slice(0, o).trim();
+			e && r.push(e), this.said += o;
+		}
+		e.has("state") && this.state === "stopped" && r.push(l), (e.has("state") || e.has("message")) && this.state === "error" && r.push(this.message || u), (n || r.length !== this.spoken.length) && (this.spoken = r);
+	}
+	updated(e) {
+		if (super.updated(e), !this.focusRetry || !this.ended) return;
+		this.focusRetry = !1;
+		let t = this.renderRoot.querySelector(".lintje-streaming-text__retry");
+		t ? t.updateComplete.then(() => t.shadowRoot?.querySelector("button")?.focus()) : this.renderRoot.querySelector(".lintje-streaming-text__box")?.focus();
+	}
+	stop() {
+		this.focusRetry = !0, this.emit("lintje-stop");
+	}
+	renderBox() {
+		if (this.state === "waiting") return r`<div
+        class="lintje-streaming-text__box lintje-streaming-text__box--waiting"
+        role="status"
+      >
+        <lintje-spinner></lintje-spinner>
+        <span class="lintje-streaming-text__waiting">${this.label}</span>
+      </div>`;
+		if (this.state === "done") return r`<div class="lintje-streaming-text__box" tabindex="-1">
+        <slot><span class="lintje-streaming-text__plain">${this.text}</span></slot>
+      </div>`;
+		if (!this.text && this.state !== "streaming") return t;
+		let e = this.state === "streaming";
+		return r`<div class="lintje-streaming-text__box" aria-busy=${e ? "true" : "false"}
+      ><span class="lintje-streaming-text__plain">${this.text}</span>${e ? r`<span class="lintje-streaming-text__caret" aria-hidden="true"></span>` : t}</div
+    >`;
+	}
+	renderFoot() {
+		if (this.state === "streaming") return r`<div class="lintje-streaming-text__foot">
+        <lintje-button
+          class="lintje-streaming-text__stop"
+          variant="secondary"
+          size="compact"
+          @click=${this.stop}
+          >Stoppen</lintje-button
+        >
+      </div>`;
+		if (this.state !== "stopped" && this.state !== "error") return t;
+		let e = this.state === "error";
+		return r`<div class="lintje-streaming-text__foot">
+      <span
+        class=${a({
+			"lintje-streaming-text__note": !0,
+			"lintje-streaming-text__note--error": e
+		})}
+        >${e ? this.message || u : l}</span
+      >
+      <lintje-button
+        class="lintje-streaming-text__retry"
+        variant="link"
+        size="compact"
+        @click=${() => this.emit("lintje-retry")}
+        >Opnieuw</lintje-button
+      >
+    </div>`;
+	}
+	render() {
+		return r`<div
+      class=${a({
+			"lintje-streaming-text": !0,
+			"lintje-streaming-text--plain": this.variant === "plain"
+		})}
+    >
+      ${this.renderBox()} ${this.renderFoot()}
+      <div class="visually-hidden" aria-live="polite" aria-atomic="false">
+        ${this.spoken.map((e) => r`<p>${e}</p>`)}
+      </div>
+    </div>`;
+	}
+};
+e("lintje-streaming-text", d);
+//#endregion
+export { d as LintjeStreamingText, s as sentenceEnd };

package/dist-elements/tag/sub-nav.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/frame/sub-nav/sub-nav.js'

package/dist-elements/tag/sub-nav.js

@@ -0,0 +1,156 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Kt as o, Lt as s, U as c, X as l, Y as u, Z as d, et as f, zt as p } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/frame/sub-nav/sub-nav.css?inline
+var m = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Typographic, as the Rijkshuisstijl's side-nav: links in the link colour, the reader's page in\n   the text colour and bold, groups apart by space alone. No fill and no edge. */\n.lintje-sub-nav { font: var(--text-ui); }\n\n.lintje-sub-nav__group + .lintje-sub-nav__group { margin-top: var(--space-6); }\n\n.lintje-sub-nav__heading {\n  margin: 0;\n  padding: var(--space-3) 0 var(--space-1);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  line-height: 1.3;\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n\n.lintje-sub-nav__list { list-style: none; margin: 0; padding: 0; }\n\n/* The second level hangs from a line, the width of the separators the house style draws. */\n.lintje-sub-nav__list--nested {\n  margin-bottom: var(--space-1);\n  padding-left: calc(var(--space-6) - 2px);\n  border-left: 2px solid var(--color-border-default);\n}\n\n/* The row reaches past the text column on both sides, so the inset focus ring clears the word. */\n.lintje-sub-nav__link {\n  display: flex; align-items: flex-start; gap: var(--space-2);\n  box-sizing: border-box;\n  min-height: var(--h-nav-row);\n  margin: 0 calc(var(--space-2) * -1);\n  padding: var(--space-3) var(--space-2);\n  border: 0;\n  background: none;\n  font: inherit;\n  line-height: 1.5;\n  color: var(--color-link);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-sub-nav__link--action { width: calc(100% + var(--space-2) * 2); }\n\n/* Only the word is underlined: an icon or a count under a line reads as part of the link text. */\n.lintje-sub-nav__label { min-width: 0; text-underline-offset: 0.2em; }\n.lintje-sub-nav__link:hover { color: var(--color-link-hover); }\n.lintje-sub-nav__link:hover .lintje-sub-nav__label { text-decoration: underline; }\n\n/* Bold carries the reader's page beside the colour (rule 13); on a fill, the side menu does not. */\n.lintje-sub-nav__link.is-current { color: var(--color-text-primary); font-weight: 700; cursor: default; }\n.lintje-sub-nav__link.is-current .lintje-sub-nav__label { text-decoration: none; }\n.lintje-sub-nav__link.is-ancestor { color: var(--color-text-primary); }\n\n.lintje-sub-nav__link.is-no-page,\n.lintje-sub-nav__link.is-no-access { color: var(--color-text-disabled); cursor: default; }\n.lintje-sub-nav__link.is-no-access { cursor: not-allowed; }\n.lintje-sub-nav__link.is-no-access .lintje-sub-nav__label { text-decoration: line-through; }\n\n/* Icon, lock and count stand on the first line of a label that wraps. */\n.lintje-sub-nav__icon { flex: none; margin-top: 2px; }\n.lintje-sub-nav__lock { flex: none; margin-top: var(--space-1); }\n.lintje-sub-nav__count { flex: none; }\n\n/* Below 768 px: one button with the reader's page, which opens the list in place. */\n.lintje-sub-nav__toggle {\n  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);\n  width: 100%;\n  min-height: var(--h-control);\n  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-sub-nav__toggle:hover { background: var(--color-bg-subtle); }\n.lintje-sub-nav__toggle-text { display: flex; flex-direction: column; min-width: 0; }\n.lintje-sub-nav__toggle-group { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-sub-nav__toggle-current { font-weight: 700; }\n.lintje-sub-nav__toggle-icon { flex: none; transition: transform var(--dur-hover) var(--ease-in-motion); }\n.lintje-sub-nav__toggle.is-open .lintje-sub-nav__toggle-icon { transform: rotate(180deg); }\n\n.lintje-sub-nav__panel {\n  padding: var(--space-1) var(--space-6) var(--space-2);\n  border: 1px solid var(--color-border-field);\n  border-top: 0;\n  background: var(--color-bg-surface);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-sub-nav__link,\n  .lintje-sub-nav__toggle,\n  .lintje-sub-nav__toggle-icon { transition: none; }\n}\n\n@media (forced-colors: active) {\n  .lintje-sub-nav__link.is-current { text-decoration: underline; }\n  .lintje-sub-nav__link.is-no-page,\n  .lintje-sub-nav__link.is-no-access { color: GrayText; }\n}\n", h = (e) => !!e.active || !!e.items?.some(h);
+function g(e) {
+	let t = (e) => {
+		for (let n of e) {
+			if (n.active) return n;
+			let e = n.items ? t(n.items) : null;
+			if (e) return e;
+		}
+		return null;
+	};
+	for (let n of e) {
+		let e = t(n.items);
+		if (e) return {
+			item: e,
+			group: n.label
+		};
+	}
+	return null;
+}
+var _ = 0, v = class extends p {
+	constructor(...e) {
+		super(...e), this.groups = [], this.label = "Submenu", this.open = !1, this.#e = new s(this, a), this.#t = `lintje-sub-nav-${++_}`;
+	}
+	static {
+		this.styles = [
+			e,
+			u,
+			r(m)
+		];
+	}
+	static {
+		this.properties = {
+			groups: { attribute: !1 },
+			action: { attribute: !1 },
+			label: { type: String },
+			open: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n() {
+		let e = this.renderRoot.querySelector(".lintje-sub-nav__panel");
+		e && c(e) && this.renderRoot.querySelector(".lintje-sub-nav__toggle")?.focus(), this.open = !1;
+	}
+	follow(e, t) {
+		i(e) && (this.#n(), this.followLink(t, e));
+	}
+	act(e) {
+		this.#n(), this.emit("lintje-action", { value: e });
+	}
+	onKeydown(e) {
+		e.key === "Escape" && this.open && (e.stopPropagation(), this.open = !1, this.renderRoot.querySelector(".lintje-sub-nav__toggle")?.focus());
+	}
+	renderItem(e) {
+		let t = e.items?.length && h(e) ? e.items : null, r = !e.active && !!t, i = e.icon ? f(e.icon, {
+			size: 20,
+			className: "lintje-sub-nav__icon"
+		}) : n, a = e.badge ? l({
+			value: e.badge.value,
+			variant: "count",
+			label: e.badge.label,
+			className: "lintje-sub-nav__count"
+		}) : n, s = o`<span class="lintje-sub-nav__label">${e.label}</span>`, c;
+		if (e.noAccess || !e.href) {
+			let t = f("gebruiksvoorwerpen-hangslot-dicht", {
+				size: 16,
+				label: "Geen toegang",
+				className: "lintje-sub-nav__lock"
+			});
+			c = o`<span
+        class=${d({
+				"lintje-sub-nav__link": !0,
+				"is-no-access": !!e.noAccess,
+				"is-no-page": !e.noAccess
+			})}
+        aria-disabled="true"
+        >${i}${s}${e.noAccess ? t === n ? o`<span>geen toegang</span>` : t : o`<span class="visually-hidden"> (niet beschikbaar)</span>`}</span
+      >`;
+		} else {
+			let t = e.href;
+			c = o`<a
+        class=${d({
+				"lintje-sub-nav__link": !0,
+				"focus-inset": !0,
+				"is-current": !!e.active,
+				"is-ancestor": r
+			})}
+        href=${t}
+        aria-current=${e.active ? "page" : n}
+        @click=${(e) => this.follow(e, t)}
+        >${i}${s}${a}</a
+      >`;
+		}
+		return o`<li>
+      ${c}${t ? o`<ul class="lintje-sub-nav__list lintje-sub-nav__list--nested">
+              ${t.map((e) => this.renderItem(e))}
+            </ul>` : n}
+    </li>`;
+	}
+	renderGroups() {
+		let e = this.action;
+		return o`${this.groups.map((e, t) => {
+			let r = `${this.#t}-g${t}`;
+			return o`<div class="lintje-sub-nav__group">
+        ${e.label ? o`<p id=${r} class="lintje-sub-nav__heading">${e.label}</p>` : n}
+        <ul class="lintje-sub-nav__list" aria-labelledby=${e.label ? r : n}>
+          ${e.items.map((e) => this.renderItem(e))}
+        </ul>
+      </div>`;
+		})}${e ? o`<div class="lintje-sub-nav__group">
+            <button
+              type="button"
+              class="lintje-sub-nav__link lintje-sub-nav__link--action focus-inset"
+              @click=${() => this.act(e.value)}
+            >
+              ${f(e.icon ?? "functioneel-plus", {
+			size: 20,
+			className: "lintje-sub-nav__icon"
+		})}<span class="lintje-sub-nav__label">${e.label}</span>
+            </button>
+          </div>` : n}`;
+	}
+	renderPhone() {
+		let e = g(this.groups), t = `${this.#t}-panel`;
+		return o`<nav class="lintje-sub-nav" aria-label=${this.label} @keydown=${this.onKeydown}>
+      <button
+        type="button"
+        class=${d({
+			"lintje-sub-nav__toggle": !0,
+			"is-open": this.open
+		})}
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${t}
+        @click=${() => this.open = !this.open}
+      >
+        <span class="lintje-sub-nav__toggle-text">
+          ${e?.group ? o`<span class="lintje-sub-nav__toggle-group">${e.group}</span>` : n}
+          <span class="lintje-sub-nav__toggle-current">${e?.item.label ?? this.label}</span>
+        </span>
+        ${f("functioneel-delta-omlaag", {
+			size: 24,
+			className: "lintje-sub-nav__toggle-icon"
+		})}
+      </button>
+      <div id=${t} class="lintje-sub-nav__panel" ?hidden=${!this.open}>${this.renderGroups()}</div>
+    </nav>`;
+	}
+	render() {
+		return !this.groups.length && !this.action ? n : this.#e.matches ? this.renderPhone() : o`<nav class="lintje-sub-nav" aria-label=${this.label}>${this.renderGroups()}</nav>`;
+	}
+};
+t("lintje-sub-nav", v);
+//#endregion
+export { v as LintjeSubNav, g as activeEntry };

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

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

package/dist-elements/tag/tabs.js

@@ -0,0 +1,172 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, I as i, Kt as a, Z as o, et as s, zt as c } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/layout/tabs/tabs.css?inline
+var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* `position: relative` makes the row the tabs' offset parent, for scrolling the chosen tab into sight. */\n.lintje-tabs__list {\n  position: relative;\n  display: flex; flex-wrap: wrap;\n  border-bottom: 1px solid var(--color-border-heavy);\n}\n\n/* A transparent bottom edge in reserve, so the chosen tab's line takes no space of its own. */\n.lintje-tabs__tab {\n  display: inline-flex; align-items: center; gap: var(--space-2);\n  height: var(--h-touch);\n  padding: 0 var(--space-4);\n  background: transparent;\n  color: var(--color-text-primary);\n  border-bottom: 3px solid transparent;\n  font: var(--text-ui);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) {\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-heavy);\n}\n\n/* The chosen tab: the line is a line (3:1) and the word is text (4.5:1), hence two tokens. */\n.lintje-tabs__tab.is-active {\n  border-bottom-color: var(--color-accent-line);\n  color: var(--color-accent-text);\n  font-weight: 700;\n}\n\n.lintje-tabs__tab.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n.lintje-tabs__panel { padding-top: var(--space-4); }\n.lintje-tabs__panel.is-pressed:focus-visible { outline: none; }\n\n@media (max-width: 767px) {\n  .lintje-tabs__list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  .lintje-tabs__list::-webkit-scrollbar { display: none; }\n  .lintje-tabs__tab { flex: 0 0 auto; }\n  .lintje-tabs__list.is-scroll-start { box-shadow: var(--shadow-scroll-start); }\n  .lintje-tabs__list.is-scroll-end { box-shadow: var(--shadow-scroll-end); }\n  .lintje-tabs__list.is-scroll-start.is-scroll-end {\n    box-shadow: var(--shadow-scroll-start), var(--shadow-scroll-end);\n  }\n}\n\n/* Forced colours: the chosen tab's line turns Highlight, a disabled tab GrayText. */\n@media (forced-colors: active) {\n  .lintje-tabs__tab.is-active { border-bottom-color: Highlight; }\n  .lintje-tabs__tab.is-disabled { color: GrayText; }\n}\n\n/* --- The panel variant --------------------------------------------------------\n   Large tabs that head a bordered panel. The chosen tab is the panel's own surface and runs into\n   it; the others stand on the subtle fill. No line: surface, accent word and weight say it. */\n.lintje-tabs--panel {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__list {\n  flex-wrap: nowrap;\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__tab {\n  flex: 1 1 0;\n  min-width: 0;\n  height: auto;\n  min-height: var(--h-touch);\n  margin-bottom: -1px;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-right: 1px solid var(--color-border-default);\n  border-bottom: 1px solid var(--color-border-default);\n  white-space: normal;\n  text-align: left;\n}\n.lintje-tabs--panel .lintje-tabs__tab:last-child { border-right: 0; }\n.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) {\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) .lintje-tabs__label {\n  text-decoration: underline;\n}\n/* The bottom edge takes the surface, so the tab and the panel are one shape. */\n.lintje-tabs--panel .lintje-tabs__tab.is-active {\n  background: var(--color-bg-surface);\n  border-bottom-color: var(--color-bg-surface);\n  color: var(--color-accent-text);\n}\n.lintje-tabs__icon { flex: none; }\n.lintje-tabs__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.lintje-tabs__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }\n.lintje-tabs__hint { font: var(--text-meta); color: var(--color-text-muted); }\n.lintje-tabs--panel .lintje-tabs__panel { padding: var(--space-6); }\n\n@media (max-width: 767px) {\n  .lintje-tabs--panel .lintje-tabs__tab {\n    flex-direction: column;\n    align-items: center;\n    gap: var(--space-2);\n    padding: var(--space-3) var(--space-2);\n    text-align: center;\n  }\n  .lintje-tabs--panel .lintje-tabs__text { align-items: center; }\n  .lintje-tabs--panel .lintje-tabs__head { justify-content: center; }\n  .lintje-tabs--panel .lintje-tabs__hint { display: none; }\n  .lintje-tabs--panel .lintje-tabs__panel { padding: var(--space-4); }\n}\n\n/* Forced colours drop the surface: the chosen tab's label is underlined instead. */\n@media (forced-colors: active) {\n  .lintje-tabs--panel .lintje-tabs__tab.is-active .lintje-tabs__label { text-decoration: underline; }\n}\n";
+//#endregion
+//#region src/components/layout/tabs/tabs.ts
+function u(e, t, n) {
+	return {
+		start: e > 1,
+		end: e + t < n - 1
+	};
+}
+function d(e, t, n, r) {
+	return e < n ? e : e + t > n + r ? e + t - r : n;
+}
+var f = class extends c {
+	constructor(...e) {
+		super(...e), this.tabs = [], this.label = "", this.variant = "line", this.edges = {
+			start: !1,
+			end: !1
+		}, this.#e = null, this.#t = !1;
+	}
+	static {
+		this.styles = [e, r(l)];
+	}
+	static {
+		this.properties = {
+			tabs: { attribute: !1 },
+			value: { type: String },
+			label: { type: String },
+			variant: {
+				type: String,
+				reflect: !0
+			},
+			edges: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	onPanelFocus(e) {
+		e.currentTarget.classList.toggle("is-pressed", this.#t), this.#t = !1;
+	}
+	get selectedIndex() {
+		let e = this.tabs.findIndex((e) => e.value === this.value);
+		return e < 0 ? 0 : e;
+	}
+	get isNav() {
+		return this.tabs.length > 0 && this.tabs.every((e) => !!e.href);
+	}
+	get list() {
+		return this.renderRoot.querySelector(".lintje-tabs__list");
+	}
+	tabElement(e) {
+		return this.renderRoot.querySelector(`#tab-${e}`);
+	}
+	disconnectedCallback() {
+		this.#e?.disconnect(), this.#e = null, super.disconnectedCallback();
+	}
+	choose(e, t) {
+		let n = this.tabs[e];
+		n && !n.disabled && (this.emit("lintje-tab-change", n.value), n.href && this.followLink(n.href, t));
+	}
+	onClick(e, t) {
+		let n = this.tabs[t];
+		n && (!n.href || n.disabled || i(e)) && this.choose(t, e);
+	}
+	onKeydown(e) {
+		let t = this.tabs.length;
+		if (!t) return;
+		let n = this.shadowRoot?.activeElement, r = Math.max(0, this.tabs.findIndex((e, t) => this.tabElement(t) === n)), i = null;
+		e.key === "ArrowRight" ? i = (r + 1) % t : e.key === "ArrowLeft" ? i = (r - 1 + t) % t : e.key === "Home" ? i = 0 : e.key === "End" && (i = t - 1), i !== null && (e.preventDefault(), this.tabElement(i)?.focus(), this.tabs[i]?.href || this.choose(i));
+	}
+	measureEdges() {
+		let e = this.list;
+		if (!e) return;
+		let t = u(e.scrollLeft, e.clientWidth, e.scrollWidth);
+		(t.start !== this.edges.start || t.end !== this.edges.end) && (this.edges = t);
+	}
+	firstUpdated() {
+		let e = this.list;
+		e && typeof ResizeObserver < "u" && (this.#e = new ResizeObserver(() => this.measureEdges()), this.#e.observe(e));
+	}
+	updated(e) {
+		if (super.updated(e), !e.has("value") && !e.has("tabs")) return;
+		let t = this.list, n = this.tabElement(this.selectedIndex);
+		t && n && t.scrollWidth > t.clientWidth && (t.scrollLeft = d(n.offsetLeft, n.offsetWidth, t.scrollLeft, t.clientWidth)), this.measureEdges();
+	}
+	renderTab(e, t, r) {
+		let i = o({
+			"lintje-tabs__tab": !0,
+			"focus-inset": !0,
+			"is-active": r,
+			"is-disabled": !!e.disabled
+		}), c = a`<span class="lintje-tabs__label">${e.label}</span>${typeof e.count == "number" ? a`<lintje-badge variant="count">${e.count}</lintje-badge>` : n}${e.badge ? a`<lintje-badge tone="info">${e.badge}</lintje-badge>` : n}`, l = this.variant === "panel" ? a`${e.icon ? s(e.icon, {
+			size: 24,
+			className: "lintje-tabs__icon"
+		}) : n}<span
+              class="lintje-tabs__text"
+              ><span class="lintje-tabs__head">${c}</span>${e.hint ? a`<span class="lintje-tabs__hint">${e.hint}</span>` : n}</span
+            >` : c;
+		return this.isNav ? e.disabled ? a`<a id="tab-${t}" class=${i} role="link" aria-disabled="true">${l}</a>` : a`<a
+            id="tab-${t}"
+            class=${i}
+            href=${e.href}
+            aria-current=${r ? "page" : n}
+            @click=${(e) => this.onClick(e, t)}
+            >${l}</a
+          >` : e.href && !e.disabled ? a`<a
+        id="tab-${t}"
+        class=${i}
+        role="tab"
+        href=${e.href}
+        aria-selected=${String(r)}
+        aria-controls="panel-${t}"
+        tabindex=${r ? 0 : -1}
+        @click=${(e) => this.onClick(e, t)}
+        >${l}</a
+      >` : a`<button
+      id="tab-${t}"
+      type="button"
+      class=${i}
+      role="tab"
+      aria-selected=${String(r)}
+      aria-controls="panel-${t}"
+      aria-disabled=${e.disabled ? "true" : n}
+      tabindex=${r ? 0 : -1}
+      @click=${(e) => this.onClick(e, t)}
+    >
+      ${l}
+    </button>`;
+	}
+	render() {
+		let e = this.selectedIndex, t = this.isNav, r = a`<div
+      class=${o({
+			"lintje-tabs__list": !0,
+			"is-scroll-start": this.edges.start,
+			"is-scroll-end": this.edges.end
+		})}
+      role=${t ? n : "tablist"}
+      aria-label=${t ? n : this.label || n}
+      @keydown=${t ? n : this.onKeydown}
+      @scroll=${this.measureEdges}
+    >
+      ${this.tabs.map((t, n) => this.renderTab(t, n, n === e))}
+    </div>`, i = o({
+			"lintje-tabs": !0,
+			"lintje-tabs--panel": this.variant === "panel"
+		});
+		return t ? a`<div class=${i}>
+        <nav aria-label=${this.label || n}>${r}</nav>
+        <div class="lintje-tabs__panel"><slot name=${this.tabs[e].value}></slot></div>
+      </div>` : a`<div class=${i}>
+      ${r}
+      ${this.tabs.map((t, n) => a`<div
+          id="panel-${n}"
+          class="lintje-tabs__panel"
+          role="tabpanel"
+          aria-labelledby="tab-${n}"
+          tabindex="0"
+          ?hidden=${n !== e}
+          @pointerdown=${() => this.#t = !0}
+          @pointerup=${() => this.#t = !1}
+          @focus=${this.onPanelFocus}
+          @blur=${(e) => e.currentTarget.classList.remove("is-pressed")}
+        >
+          <slot name=${t.value}></slot>
+        </div>`)}
+    </div>`;
+	}
+};
+t("lintje-tabs", f);
+//#endregion
+export { f as LintjeTabs, u as scrollEdges, d as scrollToShow };

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

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