lintje 0.1.1

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

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

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

@@ -0,0 +1,71 @@
+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/radio-group/radio-group.css?inline
+var c = "/* The radio group's stack; the radio itself is the shared `choice`. */\n\n.lintje-radio-group { display: flex; flex-direction: column; }\n/* Cards: the options side by side, each with a line under its label. The chosen one is quiet, as\n   in the segmented control: the choice's wash and an edge in the accent line. */\n.lintje-radio-group--cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(6 * var(--space-10))), 1fr));\n  gap: var(--space-2);\n}\n.lintje-radio-group__card {\n  align-items: flex-start;\n  padding: var(--space-3);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n}\n.lintje-radio-group__card:hover:not(.is-chosen, .is-disabled) { background: var(--color-bg-subtle); }\n.lintje-radio-group__card.is-chosen {\n  background: var(--color-choice-active-bg);\n  border-color: var(--color-accent-line);\n  box-shadow: inset 0 0 0 1px var(--color-accent-line);\n}\n.lintje-radio-group__card .lintje-choice__label { display: flex; flex-direction: column; font-weight: 700; }\n.lintje-radio-group__description { font: var(--text-small); font-weight: 400; color: var(--color-text-muted); }\n\n/* Below 768 px the two text fields take the touch height; the choice rows already have it. */\n@media (max-width: 767px) {\n  :host(lintje-text-input),\n  :host(lintje-number-input) { --h-control: var(--h-touch); }\n}\n", l = class extends o {
+	constructor(...e) {
+		super(...e), this.value = "", this.variant = "lines";
+	}
+	static {
+		this.styles = [
+			e,
+			r(s),
+			r(c)
+		];
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			options: { attribute: !1 },
+			variant: {
+				type: String,
+				reflect: !0
+			}
+		};
+	}
+	choose(e) {
+		this.value = e, this.commit(e);
+	}
+	render() {
+		return i`<div
+      class="lintje-field"
+      role="radiogroup"
+      aria-labelledby=${this.labelId}
+      aria-describedby=${this.describedBy}
+      aria-invalid=${this.error ? "true" : n}
+      aria-required=${this.required ? "true" : n}
+    >
+      ${this.renderLabel()}
+      <div class=${a({
+			"lintje-radio-group": !0,
+			"lintje-radio-group--cards": this.variant === "cards"
+		})}>
+        ${(this.options ?? []).map((e) => i`<label
+            class=${a({
+			"lintje-choice": !0,
+			"lintje-radio-group__card": this.variant === "cards",
+			"is-chosen": this.variant === "cards" && e.value === this.value,
+			"is-disabled": this.disabled
+		})}
+          >
+            <input
+              type="radio"
+              class="lintje-choice__input"
+              name=${this.name || "lintje-radio-group"}
+              value=${e.value}
+              .checked=${e.value === this.value}
+              ?disabled=${this.disabled}
+              @change=${() => this.choose(e.value)}
+            />
+            <span class="lintje-choice__radio" aria-hidden="true"></span>
+            <span class="lintje-choice__label"
+              >${e.label}${this.variant === "cards" && e.description ? i`<span class="lintje-radio-group__description">${e.description}</span>` : n}</span
+            >
+          </label>`)}
+      </div>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-radio-group", l);
+//#endregion
+export { l as LintjeRadioGroup };

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

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

package/dist-elements/tag/range.js

@@ -0,0 +1,265 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, ut as a } from "../chunks/base-rBLTcEIv.js";
+import { r as o, t as s } from "../chunks/input-jQVTln7H.js";
+//#region src/components/inputs/range/range-ticks.ts
+var c = [
+	1,
+	2,
+	5,
+	10,
+	20,
+	25,
+	50
+];
+function l(e) {
+	let t = Math.max(1, Math.ceil(e));
+	for (let e = 1; e <= 1e6; e *= 10) for (let n of c) if (n * e >= t) return n * e;
+	return t;
+}
+function u(e) {
+	let t = [];
+	for (let n = 1; n <= e; n += 1) e % n === 0 && t.push(n);
+	return t;
+}
+function d(e, t) {
+	let n = [0];
+	for (let r = t; r < e; r += t) e - r >= t && n.push(r);
+	return n.push(e), n;
+}
+function f({ count: e, width: t, labelWidth: n, gap: r = 8, markGap: i = 8 }) {
+	let a = e - 1;
+	if (a < 0) return {
+		labels: [],
+		marks: []
+	};
+	if (a === 0) return {
+		labels: [0],
+		marks: [0]
+	};
+	if (t <= 0) return {
+		labels: [0, a],
+		marks: [0, a]
+	};
+	let o = t / a, s = l((n * 1.5 + r) / o), c = u(s).find((e) => e * o >= i) ?? s;
+	return {
+		labels: d(a, s),
+		marks: d(a, c)
+	};
+}
+//#endregion
+//#region src/components/inputs/range/range.css?inline
+var p = "/* The range slider. */\n\n/* --- Range slider --------------------------------------------------------- */\n.lintje-range { position: relative; height: var(--h-target); display: flex; align-items: center; }\n/* With `hide-label` the slider takes the control height, so its handles are on the line of\n   the other controls; the tick labels hang below it. */\n:host([hide-label]) .lintje-range { height: var(--h-control); }\n.lintje-range__track {\n  position: absolute; left: 0; right: 0; height: 4px;\n  background: var(--color-border-default);\n}\n/* `--color-accent-line`, not the primary: in dark the 4 px fill would be darker than its track\n   and the handles' outline 1.25:1. */\n.lintje-range__fill { position: absolute; height: 4px; background: var(--color-accent-line); }\n.lintje-range__input {\n  --lintje-range-edge: var(--color-accent-line);\n  position: absolute; left: 0; right: 0; width: 100%;\n  height: var(--h-target-text);\n  margin: 0; background: none; pointer-events: none;\n  -webkit-appearance: none; appearance: none;\n}\n/* A 24 px target drawn as the 20 px handle: a transparent 2 px edge around the ring. Firefox's\n   thumb is `content-box` by default, which would make the target 28 px. */\n.lintje-range__input::-webkit-slider-thumb {\n  -webkit-appearance: none; appearance: none;\n  box-sizing: border-box;\n  width: var(--h-target-text); height: var(--h-target-text);\n  border: 2px solid transparent;\n  background: var(--color-bg-surface) padding-box;\n  box-shadow: inset 0 0 0 2px var(--lintje-range-edge);\n  pointer-events: auto; cursor: grab;\n}\n.lintje-range__input::-moz-range-thumb {\n  box-sizing: border-box;\n  width: var(--h-target-text); height: var(--h-target-text);\n  border: 2px solid transparent;\n  background: var(--color-bg-surface) padding-box;\n  box-shadow: inset 0 0 0 2px var(--lintje-range-edge);\n  border-radius: 0; pointer-events: auto; cursor: grab;\n}\n.lintje-range__input.is-raised { z-index: 1; }\n/* Two handles: only the thumbs take the pointer, the track's press is the element's. One\n   handle: the input takes the whole track. */\n:host(:not([single]):not([disabled])) .lintje-range { cursor: pointer; }\n:host([single]) .lintje-range__input { pointer-events: auto; cursor: pointer; }\n/* Error marks the handle, not the track: a red track would fight the chosen stretch. */\n.lintje-range.is-error .lintje-range__input { --lintje-range-edge: var(--color-error); }\n:host([disabled]) .lintje-range__fill { background: var(--color-border-strong); }\n:host([disabled]) .lintje-range__input { --lintje-range-edge: var(--color-border-strong); }\n:host([disabled]) .lintje-range__input::-webkit-slider-thumb { cursor: not-allowed; }\n:host([disabled]) .lintje-range__input::-moz-range-thumb { cursor: not-allowed; }\n.lintje-range__values { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-range__scale {\n  position: relative; height: 20px;\n  font: var(--text-axis); color: var(--color-text-muted);\n}\n.lintje-range__mark {\n  position: absolute; top: 0;\n  width: 1px; height: var(--space-1);\n  transform: translateX(-50%);\n  background: var(--color-border-default);\n}\n.lintje-range__mark.is-labelled { background: var(--color-border-strong); }\n.lintje-range__step { position: absolute; top: var(--space-2); white-space: nowrap; }\n.lintje-range__step.is-active { font-weight: 700; color: var(--color-text-primary); }\n:host([disabled]) .lintje-range__values,\n:host([disabled]) .lintje-range__step { color: var(--color-text-disabled); }\n\n/* Forced colours drop the 4 px fills: they keep their drawing in system colours. */\n@media (forced-colors: active) {\n  .lintje-range__track,\n  .lintje-range__fill { forced-color-adjust: none; }\n  .lintje-range__track { background: CanvasText; }\n  .lintje-range__fill { background: Highlight; }\n  :host([disabled]) .lintje-range__track,\n  :host([disabled]) .lintje-range__fill { background: GrayText; }\n  /* The ring is a shadow, which forced colours drop: the edge draws it instead. */\n  .lintje-range__input::-webkit-slider-thumb { border-color: CanvasText; }\n  .lintje-range__input::-moz-range-thumb { border-color: CanvasText; }\n  :host([disabled]) .lintje-range__input::-webkit-slider-thumb { border-color: GrayText; }\n  :host([disabled]) .lintje-range__input::-moz-range-thumb { border-color: GrayText; }\n}\n", m = 7, h = (e) => Math.max(1, Math.round((e - 1) / 10)), g = class extends o {
+	constructor(...e) {
+		super(...e), this.from = 0, this.to = 0, this.value = null, this.single = !1, this.stacked = !1, this.draft = null, this.draftPair = null, this.trackWidth = 0;
+	}
+	static {
+		this.styles = [n(s), n(p)];
+	}
+	static {
+		this.properties = {
+			from: { type: Number },
+			to: { type: Number },
+			value: { type: Number },
+			single: {
+				type: Boolean,
+				reflect: !0
+			},
+			unit: { type: String },
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			steps: { attribute: !1 },
+			draft: { state: !0 },
+			draftPair: { state: !0 },
+			trackWidth: { state: !0 }
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), typeof ResizeObserver < "u" && (this.observer = new ResizeObserver((e) => {
+			let t = e[0]?.contentRect.width ?? 0;
+			Math.round(t) !== Math.round(this.trackWidth) && (this.trackWidth = t);
+		}), this.observer.observe(this));
+	}
+	disconnectedCallback() {
+		this.observer?.disconnect(), this.observer = void 0, super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && (this.draft = null), (e.has("from") || e.has("to")) && (this.draftPair = null);
+	}
+	updated() {
+		let e = this.offsetWidth;
+		e && Math.round(e) !== Math.round(this.trackWidth) && (this.trackWidth = e);
+	}
+	get lastIndex() {
+		return (this.steps?.length ?? 0) - 1;
+	}
+	get index() {
+		if (this.draft !== null) return this.draft;
+		let e = (this.steps ?? []).findIndex((e) => e === this.value);
+		return e < 0 ? 0 : e;
+	}
+	get pair() {
+		return this.draftPair ?? [this.from, this.to];
+	}
+	moveHandle(e, t) {
+		let n = t.target, [r, i] = this.pair, a = Number(n.value), o = e === "from" ? [Math.min(a, i), i] : [r, Math.max(a, r)];
+		return n.value = String(e === "from" ? o[0] : o[1]), this.draftPair = o, o;
+	}
+	commitRange(e, t) {
+		this.announce([e, t]);
+	}
+	commitStep(e) {
+		let t = (this.steps ?? [])[e];
+		t !== void 0 && (this.draft = e, this.commit(typeof t == "string" ? t : Number(t)));
+	}
+	clamp(e) {
+		return Math.min(this.lastIndex, Math.max(0, e));
+	}
+	key(e) {
+		if (this.disabled) return;
+		let t = h(this.steps?.length ?? 0), n = {
+			ArrowRight: 1,
+			ArrowUp: 1,
+			ArrowLeft: -1,
+			ArrowDown: -1,
+			PageUp: t,
+			PageDown: -t
+		}, r;
+		e.key === "Home" ? r = 0 : e.key === "End" ? r = this.lastIndex : n[e.key] !== void 0 && (r = this.clamp(this.index + n[e.key])), r !== void 0 && (e.preventDefault(), r !== this.index && this.commitStep(r));
+	}
+	percent(e) {
+		return this.lastIndex > 0 ? e / this.lastIndex * 100 : 0;
+	}
+	get valueText() {
+		let e = this.steps ?? [];
+		return this.single ? this.stepText(this.index) : `${e[this.pair[0]] ?? ""} – ${e[this.pair[1]] ?? ""}`;
+	}
+	stepText(e) {
+		let t = (this.steps ?? [])[e];
+		return t === void 0 ? "" : `${t}${this.unit ? ` ${this.unit}` : ""}`;
+	}
+	onTrackPress(e) {
+		if (this.single || this.disabled || e.target instanceof HTMLInputElement) return;
+		let t = e.currentTarget.getBoundingClientRect();
+		if (!t.width || this.lastIndex < 1) return;
+		let n = Math.min(1, Math.max(0, (e.clientX - t.left) / t.width)), r = Math.round(n * this.lastIndex), [i, a] = this.pair, o = r <= i || r < a && r - i <= a - r, s = o ? [r, a] : [i, r];
+		e.preventDefault(), this.renderRoot.querySelectorAll(".lintje-range__input")[+!o]?.focus(), (s[0] !== i || s[1] !== a) && (this.draftPair = s, this.commitRange(...s));
+	}
+	handles() {
+		let e = this.lastIndex;
+		if (this.single) return r`<input
+        type="range"
+        class="lintje-range__input"
+        role="slider"
+        min="0"
+        max=${e}
+        .value=${String(this.index)}
+        ?disabled=${this.disabled}
+        aria-labelledby=${this.labelId}
+        aria-describedby=${this.describedBy}
+        aria-valuemin=${(this.steps ?? [])[0] ?? 0}
+        aria-valuemax=${(this.steps ?? [])[e] ?? 0}
+        aria-valuenow=${(this.steps ?? [])[this.index] ?? 0}
+        aria-valuetext=${this.valueText}
+        aria-invalid=${this.error ? "true" : t}
+        @keydown=${this.key}
+        @input=${(e) => {
+			this.draft = Number(e.target.value);
+		}}
+        @change=${(e) => this.commitStep(Number(e.target.value))}
+      />`;
+		let [n, a] = this.pair;
+		return r`<input
+        type="range"
+        class=${i({
+			"lintje-range__input": !0,
+			"is-raised": n === a && a === e
+		})}
+        min="0"
+        max=${e}
+        .value=${String(n)}
+        ?disabled=${this.disabled}
+        aria-label="${this.label} van${this.labelSuffixText}"
+        aria-valuetext=${this.stepText(n)}
+        aria-describedby=${this.describedBy}
+        aria-invalid=${this.error ? "true" : t}
+        @input=${(e) => this.moveHandle("from", e)}
+        @change=${(e) => this.commitRange(...this.moveHandle("from", e))}
+      />
+      <input
+        type="range"
+        class="lintje-range__input"
+        min="0"
+        max=${e}
+        .value=${String(a)}
+        ?disabled=${this.disabled}
+        aria-label="${this.label} tot en met${this.labelSuffixText}"
+        aria-valuetext=${this.stepText(a)}
+        aria-describedby=${this.describedBy}
+        aria-invalid=${this.error ? "true" : t}
+        @input=${(e) => this.moveHandle("to", e)}
+        @change=${(e) => this.commitRange(...this.moveHandle("to", e))}
+      />`;
+	}
+	render() {
+		let e = this.steps ?? [], n = this.lastIndex, o = e.reduce((e, t) => Math.max(e, String(t).length), 1), s = f({
+			count: e.length,
+			width: this.trackWidth,
+			labelWidth: o * m
+		}), c = new Set(s.labels), l = (e) => e === 0 ? {
+			left: "0",
+			right: null,
+			transform: "none"
+		} : e === n ? {
+			left: null,
+			right: "0",
+			transform: "none"
+		} : {
+			left: `${this.percent(e)}%`,
+			right: null,
+			transform: "translateX(-50%)"
+		}, u = this.single ? 0 : this.pair[0], d = this.single ? this.index : this.pair[1];
+		return r`<div class="lintje-field">
+      ${this.renderLabel(void 0, r`<span class="lintje-field__value">${this.valueText}</span>`)}
+      ${this.hideLabel ? r`<span class="lintje-range__values">${this.valueText}</span>` : t}
+      <div
+        class=${i({
+			"lintje-range": !0,
+			"is-error": !!this.error
+		})}
+        @pointerdown=${this.onTrackPress}
+      >
+        <span class="lintje-range__track"></span>
+        <span
+          class="lintje-range__fill"
+          ${a({
+			left: `${this.percent(u)}%`,
+			right: `${100 - this.percent(d)}%`
+		})}
+        ></span>
+        ${this.handles()}
+      </div>
+      <div class="lintje-range__scale" aria-hidden="true">
+        ${s.marks.map((e) => r`<span
+            class=${i({
+			"lintje-range__mark": !0,
+			"is-labelled": c.has(e)
+		})}
+            ${a({ left: `${this.percent(e)}%` })}
+          ></span>`)}
+        ${s.labels.map((t) => r`<span
+            class=${i({
+			"lintje-range__step": !0,
+			"is-active": this.single ? t === this.index : t >= u && t <= d
+		})}
+            ${a(l(t))}
+            >${e[t]}</span
+          >`)}
+      </div>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+e("lintje-range", g);
+//#endregion
+export { g as LintjeRange };

package/dist-elements/tag/recording-status.d.ts

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

package/dist-elements/tag/recording-status.js

@@ -0,0 +1,87 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import { levelWord as o } from "./level-meter.js";
+import "./description-list.js";
+//#region src/components/feedback/recording-status/recording-status.css?inline
+var s = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The cells are the description list's; what stands here is the connection's own meter. */\n.lintje-recording-status__connection { display: flex; align-items: center; gap: var(--space-3); font-weight: 400; }\n\n/* The connection: four rising steps, as many lit as it is strong. */\n.lintje-recording-status__signal {\n  display: inline-flex;\n  align-items: flex-end;\n  gap: 3px;\n  height: var(--space-6);\n}\n.lintje-recording-status__step {\n  width: 5px;\n  background: var(--color-border-default);\n}\n.lintje-recording-status__step:nth-child(1) { height: 30%; }\n.lintje-recording-status__step:nth-child(2) { height: 55%; }\n.lintje-recording-status__step:nth-child(3) { height: 78%; }\n.lintje-recording-status__step:nth-child(4) { height: 100%; }\n.is-good .lintje-recording-status__step.is-lit { background: var(--color-success); }\n.is-weak .lintje-recording-status__step.is-lit { background: var(--color-warning); }\n.lintje-recording-status__words { display: flex; flex-direction: column; line-height: 1.2; }\n.lintje-recording-status__sub { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* Forced colours drop the fills: the bars keep a border, the words carry the rest. */\n@media (forced-colors: active) {\n  .lintje-recording-status__step.is-lit { background: CanvasText; }\n  .lintje-recording-status__step { border: 1px solid CanvasText; }\n}\n", c = {
+	good: "Goed",
+	weak: "Zwak",
+	lost: "Verbroken"
+}, l = {
+	good: 4,
+	weak: 2,
+	lost: 0
+};
+function u(e) {
+	let t = Math.max(0, Math.floor(e)), n = Math.floor(t / 3600), r = Math.floor(t % 3600 / 60), i = String(t % 60).padStart(2, "0");
+	return n ? `${n}:${String(r).padStart(2, "0")}:${i}` : `${r}:${i}`;
+}
+var d = class extends a {
+	static {
+		this.styles = n(s);
+	}
+	static {
+		this.properties = {
+			elapsed: { type: Number },
+			level: { type: Number },
+			connection: { type: String },
+			delay: { type: Number }
+		};
+	}
+	renderLevel() {
+		return this.level == null ? t : r`<lintje-level-meter slot="level" .level=${this.level}></lintje-level-meter>`;
+	}
+	renderConnection(e) {
+		let n = l[e], a = e === "lost" ? "Wacht op verbinding" : this.delay == null ? "" : `${this.delay} ${this.delay === 1 ? "seconde" : "seconden"} achter`;
+		return r`<span slot="connection" class="lintje-recording-status__connection"><span
+        class=${i({
+			"lintje-recording-status__signal": !0,
+			[`is-${e}`]: !0
+		})}
+        aria-hidden="true"
+      >
+        ${[
+			1,
+			2,
+			3,
+			4
+		].map((e) => r`<span
+              class=${i({
+			"lintje-recording-status__step": !0,
+			"is-lit": e <= n
+		})}
+            ></span>`)}
+      </span>
+      <span class="lintje-recording-status__words">
+        <strong>${c[e]}</strong>
+        ${a ? r`<span class="lintje-recording-status__sub">${a}</span>` : t}
+      </span></span>`;
+	}
+	render() {
+		let e = this.connection, n = [
+			{
+				label: "Looptijd",
+				icon: "functioneel-klok",
+				large: !0,
+				value: this.elapsed == null ? null : u(this.elapsed)
+			},
+			{
+				label: "Geluid",
+				icon: "beeld-en-geluid-microfoon",
+				value: null,
+				slot: this.level == null ? void 0 : "level"
+			},
+			...e ? [{
+				label: "Verbinding",
+				icon: "functioneel-smartphone",
+				value: null,
+				slot: "connection"
+			}] : []
+		];
+		return r`<lintje-description-list layout="grid" surface .columns=${n.length} .items=${n}>
+      ${this.renderLevel()} ${e ? this.renderConnection(e) : t}
+    </lintje-description-list>`;
+	}
+};
+e("lintje-recording-status", d);
+//#endregion
+export { d as LintjeRecordingStatus, u as clockOf, o as levelWord };

package/dist-elements/tag/repeater-row.d.ts

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

package/dist-elements/tag/repeater-row.js

@@ -0,0 +1 @@
+export { LintjeRepeater, LintjeRepeaterRow, firstFocusable } from "./repeater.js";

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

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

package/dist-elements/tag/repeater.js

@@ -0,0 +1,158 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, zt as i } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/forms/repeater/repeater.css?inline
+var a = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-repeater {\n  min-width: 0;\n  margin: 0; padding: 0; border: 0;\n}\n/* The legend stands above its rows as a field's label does above its control; the gap lives in\n   the body, because browsers differ on whether a legend takes part in a fieldset's flex gap. */\n.lintje-repeater__legend {\n  padding: 0 0 6px;\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-text-primary);\n}\n.lintje-repeater__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n:host([disabled]) .lintje-repeater__legend { color: var(--color-text-disabled); }\n.lintje-repeater__rows { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n.lintje-repeater__foot {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.lintje-repeater__count { font: var(--text-meta); color: var(--color-text-muted); }\n\n@media (max-width: 767px) {\n  .lintje-repeater__rows { gap: var(--space-5); }\n}\n", o = "/* One row of a repeater: the host's fields side by side, then the remove icon button. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n@media (max-width: 767px) {\n  :host(:not([index='0'])) {\n    padding-top: var(--space-5);\n    border-top: 1px solid var(--color-border-default);\n  }\n}\n\n/* --- */\n\n/* The button aligns with the controls' bottom edge when a field carries its label above it. */\n.lintje-repeater-row { display: flex; align-items: flex-end; gap: var(--space-2); min-width: 0; }\n.lintje-repeater-row__fields { flex: 1; min-width: 0; display: flex; gap: var(--space-2); }\n.lintje-repeater-row__fields ::slotted(*) { flex: 1 1 0; min-width: 0; }\n/* A square as high as the controls beside it. */\n.lintje-repeater-row__remove { flex: none; --h-icon-button: var(--h-control); }\n\n/* Below 768 px the fields stack and the remove button stands beside the first. */\n@media (max-width: 767px) {\n  .lintje-repeater-row { align-items: flex-start; }\n  .lintje-repeater-row__fields { flex-direction: column; }\n}\n", s = "input, select, textarea, button, [contenteditable=\"true\"], [tabindex]";
+function c(e) {
+	let t = e;
+	if (t.matches(s) && !t.matches(":disabled") && t.getAttribute("tabindex") !== "-1") return t;
+	for (let t of [...e.children, ...e.shadowRoot?.children ?? []]) {
+		let e = c(t);
+		if (e) return e;
+	}
+	return null;
+}
+var l = class extends i {
+	constructor(...e) {
+		super(...e), this.index = 0, this.label = "", this.removable = !0, this.disabled = !1;
+	}
+	static {
+		this.styles = n(o);
+	}
+	static {
+		this.properties = {
+			index: {
+				type: Number,
+				reflect: !0
+			},
+			label: { type: String },
+			removable: { type: Boolean },
+			disabled: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	focusRemove() {
+		let e = this.renderRoot.querySelector("lintje-icon-button");
+		(e?.shadowRoot?.querySelector("button") ?? e)?.focus();
+	}
+	requestRemove() {
+		this.removable && !this.disabled && this.emit("lintje-row-remove", this.index);
+	}
+	render() {
+		return r`<div class="lintje-repeater-row" role="group" aria-label=${this.label || t}>
+      <div class="lintje-repeater-row__fields"><slot></slot></div>
+      <lintje-icon-button
+        class="lintje-repeater-row__remove"
+        icon="functioneel-verwijderen"
+        variant="outlined"
+        label=${`${this.label || "Rij"} verwijderen`}
+        ?disabled=${!this.removable || this.disabled}
+        @click=${this.requestRemove}
+      ></lintje-icon-button>
+    </div>`;
+	}
+}, u = class extends i {
+	constructor(...e) {
+		super(...e), this.legend = "", this.itemLabel = "", this.min = 0, this.disabled = !1, this.count = 0, this.spoken = "", this.pending = null, this.onRowRemove = (e) => {
+			let t = e.detail;
+			this.pending = {
+				kind: "remove",
+				index: t
+			};
+		};
+	}
+	static {
+		this.styles = n(a);
+	}
+	static {
+		this.properties = {
+			legend: { type: String },
+			itemLabel: {
+				type: String,
+				attribute: "item-label"
+			},
+			addLabel: {
+				type: String,
+				attribute: "add-label"
+			},
+			min: { type: Number },
+			max: { type: Number },
+			disabled: {
+				type: Boolean,
+				reflect: !0
+			},
+			count: { state: !0 },
+			spoken: { state: !0 }
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("lintje-row-remove", this.onRowRemove);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("lintje-row-remove", this.onRowRemove), super.disconnectedCallback();
+	}
+	name(e) {
+		return `${this.itemLabel || "Rij"} ${e + 1}`;
+	}
+	get rows() {
+		let e = this.renderRoot.querySelector("slot");
+		return e ? e.assignedElements() : [...this.children];
+	}
+	get atMax() {
+		return this.max != null && this.count >= this.max;
+	}
+	sync() {
+		let e = this.rows, t = this.count;
+		this.count = e.length, e.forEach((t, n) => {
+			t instanceof l && (t.index = n, t.label = this.name(n), t.removable = e.length > this.min, t.disabled = this.disabled);
+		});
+		let n = this.pending;
+		if (n?.kind === "add" && e.length > t) {
+			this.pending = null, this.spoken = `${this.name(e.length - 1)} toegevoegd`;
+			let t = e[e.length - 1];
+			this.afterRows(t).then(() => c(t)?.focus());
+		} else if (n?.kind === "remove" && e.length < t) {
+			this.pending = null, this.spoken = `${this.name(n.index)} verwijderd`;
+			let t = e[Math.max(0, n.index - 1)];
+			this.afterRows(t).then(() => {
+				t instanceof l ? t.focusRemove() : this.focusAdd();
+			});
+		}
+	}
+	async afterRows(e) {
+		await this.updateComplete, e instanceof i && await e.updateComplete, await new Promise((e) => requestAnimationFrame(e));
+	}
+	focusAdd() {
+		let e = this.renderRoot.querySelector("lintje-button");
+		(e?.shadowRoot?.querySelector("button") ?? e)?.focus();
+	}
+	add() {
+		this.atMax || this.disabled || (this.pending = { kind: "add" }, this.emit("lintje-row-add", this.count));
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("min") || e.has("disabled") || e.has("itemLabel")) && this.sync();
+	}
+	render() {
+		let e = this.addLabel ?? (this.itemLabel ? `${this.itemLabel} toevoegen` : "Rij toevoegen");
+		return r`<fieldset class="lintje-repeater" ?disabled=${this.disabled}>
+      <legend class="lintje-repeater__legend">${this.legend}</legend>
+      <div class="lintje-repeater__body">
+      <div class="lintje-repeater__rows"><slot @slotchange=${this.sync}></slot></div>
+      <div class="lintje-repeater__foot">
+        <lintje-button
+          variant="secondary"
+          icon="functioneel-plus"
+          ?disabled=${this.atMax || this.disabled}
+          @click=${this.add}
+          >${e}</lintje-button
+        >
+        ${this.max == null ? t : r`<span class="lintje-repeater__count">${this.count} van hoogstens ${this.max}</span>`}
+      </div>
+      </div>
+      <span class="visually-hidden" aria-live="polite">${this.spoken}</span>
+    </fieldset>`;
+	}
+};
+e("lintje-repeater-row", l), e("lintje-repeater", u);
+//#endregion
+export { u as LintjeRepeater, l as LintjeRepeaterRow, c as firstFocusable };

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

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