lintje 0.2.0 → 0.4.0

package/dist-elements/tag/range.js

@@ -1,5 +1,6 @@
-import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, ut as a } from "../chunks/base-Bg-IFOPG.js";
-import { r as o, t as s } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, bt as n, en as r, nn as i, st as a } from "../chunks/base-DRGvkF-r.js";
+import { n as o } from "../chunks/input-BGMLam-O.js";
+import { t as s } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/range/range-ticks.ts
 var c = [
 	1,
@@ -52,7 +53,7 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
 		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)];
+		this.styles = [t(s), t(p)];
 	}
 	static {
 		this.properties = {
@@ -161,28 +162,28 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
         aria-valuemax=${(this.steps ?? [])[e] ?? 0}
         aria-valuenow=${(this.steps ?? [])[this.index] ?? 0}
         aria-valuetext=${this.valueText}
-        aria-invalid=${this.error ? "true" : t}
+        aria-invalid=${this.error ? "true" : r}
         @keydown=${this.key}
         @input=${(e) => {
 			this.draft = Number(e.target.value);
 		}}
         @change=${(e) => this.commitStep(Number(e.target.value))}
       />`;
-		let [n, a] = this.pair;
+		let [t, n] = this.pair;
 		return i`<input
         type="range"
-        class=${r({
+        class=${a({
 			"lintje-range__input": !0,
-			"is-raised": n === a && a === e
+			"is-raised": t === n && n === e
 		})}
         min="0"
         max=${e}
-        .value=${String(n)}
+        .value=${String(t)}
         ?disabled=${this.disabled}
         aria-label="${this.label} van${this.labelSuffixText}"
-        aria-valuetext=${this.stepText(n)}
+        aria-valuetext=${this.stepText(t)}
         aria-describedby=${this.describedBy}
-        aria-invalid=${this.error ? "true" : t}
+        aria-invalid=${this.error ? "true" : r}
         @input=${(e) => this.moveHandle("from", e)}
         @change=${(e) => this.commitRange(...this.moveHandle("from", e))}
       />
@@ -191,18 +192,18 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
         class="lintje-range__input"
         min="0"
         max=${e}
-        .value=${String(a)}
+        .value=${String(n)}
         ?disabled=${this.disabled}
         aria-label="${this.label} tot en met${this.labelSuffixText}"
-        aria-valuetext=${this.stepText(a)}
+        aria-valuetext=${this.stepText(n)}
         aria-describedby=${this.describedBy}
-        aria-invalid=${this.error ? "true" : t}
+        aria-invalid=${this.error ? "true" : r}
         @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({
+		let e = this.steps ?? [], t = 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
@@ -210,7 +211,7 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
 			left: "0",
 			right: null,
 			transform: "none"
-		} : e === n ? {
+		} : e === t ? {
 			left: null,
 			right: "0",
 			transform: "none"
@@ -221,9 +222,9 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
 		}, u = this.single ? 0 : this.pair[0], d = this.single ? this.index : this.pair[1];
 		return i`<div class="lintje-field">
       ${this.renderLabel(void 0, i`<span class="lintje-field__value">${this.valueText}</span>`)}
-      ${this.hideLabel ? i`<span class="lintje-range__values">${this.valueText}</span>` : t}
+      ${this.hideLabel ? i`<span class="lintje-range__values">${this.valueText}</span>` : r}
       <div
-        class=${r({
+        class=${a({
 			"lintje-range": !0,
 			"is-error": !!this.error
 		})}
@@ -232,7 +233,7 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
         <span class="lintje-range__track"></span>
         <span
           class="lintje-range__fill"
-          ${a({
+          ${n({
 			left: `${this.percent(u)}%`,
 			right: `${100 - this.percent(d)}%`
 		})}
@@ -241,18 +242,18 @@ var p = "/* The range slider. */\n\n/* --- Range slider ------------------------
       </div>
       <div class="lintje-range__scale" aria-hidden="true">
         ${s.marks.map((e) => i`<span
-            class=${r({
+            class=${a({
 			"lintje-range__mark": !0,
 			"is-labelled": c.has(e)
 		})}
-            ${a({ left: `${this.percent(e)}%` })}
+            ${n({ left: `${this.percent(e)}%` })}
           ></span>`)}
         ${s.labels.map((t) => i`<span
-            class=${r({
+            class=${a({
 			"lintje-range__step": !0,
 			"is-active": this.single ? t === this.index : t >= u && t <= d
 		})}
-            ${a(l(t))}
+            ${n(l(t))}
             >${e[t]}</span
           >`)}
       </div>

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

@@ -1,8 +1,8 @@
-import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
-import { levelWord as o } from "./level-meter.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-DRGvkF-r.js";
 import "./description-list.js";
+import { levelWord as o } from "./level-meter.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 = {
+var s = "/* Its list measures its own width, so it takes the room it stands in, also in a hero's column. */\n:host { display: block; width: 100%; 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"
@@ -15,7 +15,7 @@ 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 {
+var d = class extends e {
 	static {
 		this.styles = n(s);
 	}
@@ -28,12 +28,12 @@ var d = class extends a {
 		};
 	}
 	renderLevel() {
-		return this.level == null ? t : i`<lintje-level-meter slot="level" .level=${this.level}></lintje-level-meter>`;
+		return this.level == null ? r : i`<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`;
+		let t = l[e], n = e === "lost" ? "Wacht op verbinding" : this.delay == null ? "" : `${this.delay} ${this.delay === 1 ? "seconde" : "seconden"} achter`;
 		return i`<span slot="connection" class="lintje-recording-status__connection"><span
-        class=${r({
+        class=${a({
 			"lintje-recording-status__signal": !0,
 			[`is-${e}`]: !0
 		})}
@@ -45,19 +45,19 @@ var d = class extends a {
 			3,
 			4
 		].map((e) => i`<span
-              class=${r({
+              class=${a({
 			"lintje-recording-status__step": !0,
-			"is-lit": e <= n
+			"is-lit": e <= t
 		})}
             ></span>`)}
       </span>
       <span class="lintje-recording-status__words">
         <strong>${c[e]}</strong>
-        ${a ? i`<span class="lintje-recording-status__sub">${a}</span>` : t}
+        ${n ? i`<span class="lintje-recording-status__sub">${n}</span>` : r}
       </span></span>`;
 	}
 	render() {
-		let e = this.connection, n = [
+		let e = this.connection, t = [
 			{
 				label: "Looptijd",
 				icon: "functioneel-klok",
@@ -77,11 +77,11 @@ var d = class extends a {
 				slot: "connection"
 			}] : []
 		];
-		return i`<lintje-description-list layout="grid" surface .columns=${n.length} .items=${n}>
-      ${this.renderLevel()} ${e ? this.renderConnection(e) : t}
+		return i`<lintje-description-list layout="grid" surface .columns=${t.length} .items=${t}>
+      ${this.renderLevel()} ${e ? this.renderConnection(e) : r}
     </lintje-description-list>`;
 	}
 };
-e("lintje-recording-status", d);
+t("lintje-recording-status", d);
 //#endregion
 export { d as LintjeRecordingStatus, u as clockOf, o as levelWord };

package/dist-elements/tag/repeater.js

@@ -1,6 +1,6 @@
-import { Bt as e, Gt as t, Ht as n, qt as r, zt as i } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i } from "../chunks/base-DRGvkF-r.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]";
+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 screen and (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 screen and (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 screen and (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;
@@ -10,7 +10,7 @@ function c(e) {
 	}
 	return null;
 }
-var l = class extends i {
+var l = class extends e {
 	constructor(...e) {
 		super(...e), this.index = 0, this.label = "", this.removable = !0, this.disabled = !1;
 	}
@@ -39,7 +39,7 @@ var l = class extends i {
 		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}>
+		return i`<div class="lintje-repeater-row" role="group" aria-label=${this.label || r}>
       <div class="lintje-repeater-row__fields"><slot></slot></div>
       <lintje-icon-button
         class="lintje-repeater-row__remove"
@@ -51,7 +51,7 @@ var l = class extends i {
       ></lintje-icon-button>
     </div>`;
 	}
-}, u = class extends i {
+}, u = class extends e {
 	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;
@@ -119,8 +119,8 @@ var l = class extends i {
 			});
 		}
 	}
-	async afterRows(e) {
-		await this.updateComplete, e instanceof i && await e.updateComplete, await new Promise((e) => requestAnimationFrame(e));
+	async afterRows(t) {
+		await this.updateComplete, t instanceof e && await t.updateComplete, await new Promise((e) => requestAnimationFrame(e));
 	}
 	focusAdd() {
 		let e = this.renderRoot.querySelector("lintje-button");
@@ -134,7 +134,7 @@ var l = class extends i {
 	}
 	render() {
 		let e = this.addLabel ?? (this.itemLabel ? `${this.itemLabel} toevoegen` : "Rij toevoegen");
-		return r`<fieldset class="lintje-repeater" ?disabled=${this.disabled}>
+		return i`<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>
@@ -146,13 +146,13 @@ var l = class extends i {
           @click=${this.add}
           >${e}</lintje-button
         >
-        ${this.max == null ? t : r`<span class="lintje-repeater__count">${this.count} van hoogstens ${this.max}</span>`}
+        ${this.max == null ? r : i`<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);
+t("lintje-repeater-row", l), t("lintje-repeater", u);
 //#endregion
 export { u as LintjeRepeater, l as LintjeRepeaterRow, c as firstFocusable };

package/dist-elements/tag/segmented.js

@@ -1,12 +1,13 @@
-import { Bt as e, Gt as t, Ht as n, Z as r, qt as i } from "../chunks/base-Bg-IFOPG.js";
-import { r as a, t as o } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, nn as r, st as i } from "../chunks/base-DRGvkF-r.js";
+import { n as a } from "../chunks/input-BGMLam-O.js";
+import { t as o } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/segmented/segmented.css?inline
-var s = "/* The segmented control keeps `min-width: auto`: it never shrinks below its options. */\n:host { display: block; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The frame hugs its options: a wider host leaves its room outside the border, not in it. It\n   never grows past its room, so the element can read that room off the frame. */\n.lintje-segmented {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n  height: var(--h-control);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n}\n.lintje-segmented.is-error { border: 2px solid var(--color-error); }\n/* Disabled keeps the quiet border, also over an error. */\n:host([disabled]) .lintje-segmented { border: 1px solid var(--color-border-strong); }\n.lintje-segmented__option {\n  display: flex; align-items: center;\n  padding: 0 var(--space-3);\n  font-size: 1rem;\n  color: var(--color-text-primary);\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-segmented__option:hover:not(.is-active) { background: var(--color-bg-subtle); }\n.lintje-segmented__option:disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-segmented__option:disabled:hover { background: var(--color-bg-subtle); }\n/* Chosen is quiet, not filled: a filled surface is the page's one primary action. The edge is a\n   ring half inside, half over the frame, so it covers the frame's line instead of standing in it;\n   a real border would push the neighbouring segments over. */\n.lintje-segmented__option.is-active {\n  position: relative;\n  z-index: 1;\n  background: var(--color-choice-active-bg);\n  color: var(--color-accent-text);\n  box-shadow: 0 0 0 1px var(--color-accent-line), inset 0 0 0 1px var(--color-accent-line);\n  font-weight: 700;\n}\n.lintje-segmented__option:disabled.is-active {\n  background: var(--color-border-strong);\n  color: var(--color-text-disabled);\n  box-shadow: none;\n}\n\n.lintje-segmented__description {\n  margin: var(--space-2) 0 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-bg-subtle);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n}\n\n/* The bar cannot reach into the shadow root, so the control carries the bar's breakpoints. */\n@media (min-width: 1024px) and (max-width: 1439px) {\n  :host(:not([stacked])) .lintje-segmented__option { padding: 0 10px; }\n}\n@media (min-width: 768px) and (max-width: 1023px) {\n  :host { width: 100%; }\n  .lintje-segmented { width: 100%; }\n  .lintje-segmented__option { flex: 1; justify-content: center; }\n}\n:host([stacked]) .lintje-segmented { width: 100%; }\n:host([stacked]) .lintje-segmented__option { flex: 1; justify-content: center; }\n\n/* A row wider than its room: the options stand under each other, each the full width. */\n.lintje-segmented.is-column { flex-direction: column; width: 100%; height: auto; }\n.lintje-segmented.is-column .lintje-segmented__option { min-height: var(--h-touch); }\n\n/* Forced colours drop the fill and ring: every segment has a 1 px border, so nothing moves. */\n@media (forced-colors: active) {\n  .lintje-segmented__option { border: 1px solid Canvas; }\n  .lintje-segmented__option.is-active { border-color: Highlight; }\n  :host([disabled]) .lintje-segmented__option.is-active { border-color: GrayText; }\n}\n", c = "lintje-segmented-description", l = class extends a {
+var s = "/* The segmented control keeps `min-width: auto`: it never shrinks below its options. */\n:host { display: block; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The frame hugs its options: a wider host leaves its room outside the border, not in it. It\n   never grows past its room, so the element can read that room off the frame. */\n.lintje-segmented {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n  height: var(--h-control);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n}\n.lintje-segmented.is-error { border: 2px solid var(--color-error); }\n/* Disabled keeps the quiet border, also over an error. */\n:host([disabled]) .lintje-segmented { border: 1px solid var(--color-border-strong); }\n.lintje-segmented__option {\n  display: flex; align-items: center; gap: var(--space-2);\n  padding: 0 var(--space-3);\n  font-size: 1rem;\n  color: var(--color-text-primary);\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-segmented__option:hover:not(.is-active) { background: var(--color-bg-subtle); }\n.lintje-segmented__option:disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-segmented__option:disabled:hover { background: var(--color-bg-subtle); }\n/* Chosen is quiet, not filled: a filled surface is the page's one primary action. The edge is a\n   ring half inside, half over the frame, so it covers the frame's line instead of standing in it;\n   a real border would push the neighbouring segments over. */\n.lintje-segmented__option.is-active {\n  position: relative;\n  z-index: 1;\n  background: var(--color-choice-active-bg);\n  color: var(--color-accent-text);\n  box-shadow: 0 0 0 1px var(--color-accent-line), inset 0 0 0 1px var(--color-accent-line);\n  font-weight: 700;\n}\n.lintje-segmented__option:disabled.is-active {\n  background: var(--color-border-strong);\n  color: var(--color-text-disabled);\n  box-shadow: none;\n}\n\n.lintje-segmented__description {\n  margin: var(--space-2) 0 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-bg-subtle);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n}\n\n/* The bar cannot reach into the shadow root, so the control carries the bar's breakpoints. */\n@media (min-width: 1024px) and (max-width: 1439px) {\n  :host(:not([stacked])) .lintje-segmented__option { padding: 0 10px; }\n}\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  :host { width: 100%; }\n  .lintje-segmented { width: 100%; }\n  .lintje-segmented__option { flex: 1; justify-content: center; }\n}\n:host([stacked]) .lintje-segmented { width: 100%; }\n:host([stacked]) .lintje-segmented__option { flex: 1; justify-content: center; }\n\n/* A row wider than its room: the options stand under each other, each the full width. */\n.lintje-segmented.is-column { flex-direction: column; width: 100%; height: auto; }\n.lintje-segmented.is-column .lintje-segmented__option { min-height: var(--h-touch); }\n\n/* Forced colours drop the fill and ring: every segment has a 1 px border, so nothing moves. */\n@media (forced-colors: active) {\n  .lintje-segmented__option { border: 1px solid Canvas; }\n  .lintje-segmented__option.is-active { border-color: Highlight; }\n  :host([disabled]) .lintje-segmented__option.is-active { border-color: GrayText; }\n}\n", c = "lintje-segmented-description", l = class extends a {
 	constructor(...e) {
 		super(...e), this.value = "", this.bold = !1, this.stacked = !1, this.column = !1, this.#e = 0, this.#t = null;
 	}
 	static {
-		this.styles = [n(s), n(o)];
+		this.styles = [t(s), t(o)];
 	}
 	static {
 		this.properties = {
@@ -45,23 +46,23 @@ var s = "/* The segmented control keeps `min-width: auto`: it never shrinks belo
 		this.value = e, this.commit(e);
 	}
 	render() {
-		let e = (this.options ?? []).find((e) => e.value === this.value)?.description, n = [e ? c : "", this.describedBy === t ? "" : this.describedBy].filter(Boolean).join(" ");
-		return i`<div class="lintje-field">
+		let e = (this.options ?? []).find((e) => e.value === this.value)?.description, t = [e ? c : "", this.describedBy === n ? "" : this.describedBy].filter(Boolean).join(" ");
+		return r`<div class="lintje-field">
       ${this.renderLabel()}
       <div
-        class=${r({
+        class=${i({
 			"lintje-segmented": !0,
 			"is-column": this.column,
 			"is-error": !!this.error
 		})}
         role="group"
         aria-labelledby=${this.labelId}
-        aria-describedby=${n || t}
-        aria-invalid=${this.error ? "true" : t}
+        aria-describedby=${t || n}
+        aria-invalid=${this.error ? "true" : n}
       >
-        ${(this.options ?? []).map((e) => i`<button
+        ${(this.options ?? []).map((e) => r`<button
             type="button"
-            class=${r({
+            class=${i({
 			"lintje-segmented__option": !0,
 			"is-active": e.value === this.value,
 			"is-bold": this.bold && e.value === this.value
@@ -70,10 +71,10 @@ var s = "/* The segmented control keeps `min-width: auto`: it never shrinks belo
             ?disabled=${this.disabled}
             @click=${() => this.choose(e.value)}
           >
-            ${e.label}
+            ${e.label}${typeof e.count == "number" ? r`<lintje-badge variant="count">${e.count}</lintje-badge>` : n}
           </button>`)}
       </div>
-      ${e ? i`<p class="lintje-segmented__description" id=${c}>${e}</p>` : t}
+      ${e ? r`<p class="lintje-segmented__description" id=${c}>${e}</p>` : n}
       ${this.renderFoot()}
     </div>`;
 	}

package/dist-elements/tag/select.js

@@ -1,5 +1,6 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, qt as o } from "../chunks/base-Bg-IFOPG.js";
-import { r as s, t as c } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a, ut as o } from "../chunks/base-DRGvkF-r.js";
+import { n as s } from "../chunks/input-BGMLam-O.js";
+import { t as c } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/select/select.css?inline
 var l = "/* The select. Its width is the host's, set from outside by tag. */\n:host { display: block; width: 180px; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-select { position: relative; display: flex; align-items: center; }\n.lintje-select__control {\n  appearance: none;\n  width: 100%;\n  height: var(--h-control);\n  padding: 0 34px 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  font-size: 1rem;\n  color: var(--color-text-primary);\n  border-radius: var(--radius);\n}\n.lintje-select__control.is-bold { font-weight: 700; }\n.lintje-select__control.is-error { border: 2px solid var(--color-error); }\n.lintje-select__control:disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-select__control:disabled { border: 1px solid var(--color-border-strong); }\n.lintje-select__icon { position: absolute; right: 12px; pointer-events: none; color: var(--color-text-primary); }\n", u = class extends s {
 	constructor(...e) {
@@ -7,9 +8,9 @@ var l = "/* The select. Its width is the host's, set from outside by tag. */\n:h
 	}
 	static {
 		this.styles = [
-			e,
-			r(l),
-			r(c)
+			r,
+			t(l),
+			t(c)
 		];
 	}
 	static {
@@ -27,12 +28,12 @@ var l = "/* The select. Its width is the host's, set from outside by tag. */\n:h
 		this.value = e.target.value, this.commit(this.value);
 	}
 	render() {
-		return o`<div class="lintje-field">
+		return i`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <div class="lintje-select">
         <select
           id=${this.controlId}
-          class=${i({
+          class=${a({
 			"lintje-select__control": !0,
 			"is-bold": this.bold,
 			"is-error": !!this.error
@@ -45,11 +46,11 @@ var l = "/* The select. Its width is the host's, set from outside by tag. */\n:h
           .value=${this.value}
           @change=${this.choose}
         >
-          ${(this.options ?? []).map((e) => o`<option value=${e.value} ?selected=${e.value === this.value}>
+          ${(this.options ?? []).map((e) => i`<option value=${e.value} ?selected=${e.value === this.value}>
                 ${e.label}
               </option>`)}
         </select>
-        ${a("functioneel-delta-omlaag", {
+        ${o("functioneel-delta-omlaag", {
 			size: 16,
 			className: "lintje-select__icon"
 		})}
@@ -58,6 +59,6 @@ var l = "/* The select. Its width is the host's, set from outside by tag. */\n:h
     </div>`;
 	}
 };
-t("lintje-select", u);
+e("lintje-select", u);
 //#endregion
 export { u as LintjeSelect };