lintje 0.1.1 → 0.2.0

package/dist-elements/tag/menu-button.js

@@ -1,26 +1,26 @@
-import { $ as e, B as t, Bt as n, G as r, Gt as i, Ht as a, I as o, Kt as s, Z as c, et as l, j as u, q as d, zt as f } from "../chunks/base-rBLTcEIv.js";
-//#region src/components/actions/menu-button/menu-button.css?inline
-var p = "/* The host is the trigger's box, with the busy sentence beside it; the menu is a fixed popover\n   and takes no space. */\n:host {\n  display: inline-flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-3);\n  min-width: 0;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-menu-button__trigger.lintje-button--secondary.is-open { background: var(--color-bg-selected); }\n.lintje-menu-button__trigger.lintje-button--tertiary.is-open { background: var(--color-bg-subtle); }\n.lintje-menu-button__trigger.lintje-icon-button--outlined.is-open { background: var(--color-bg-selected); }\n.lintje-menu-button__trigger.lintje-icon-button--flat.is-open { background: var(--color-bg-subtle); }\n\n\n.lintje-menu-button__trigger.lintje-button { padding-right: var(--space-3); }\n.lintje-menu-button__trigger--flat.lintje-button { padding: 0 var(--space-2); border-color: transparent; }\n/* Split: two halves of one button, the page showing through the 1 px between them. */\n.lintje-menu-button__split { display: inline-flex; gap: 1px; min-width: 0; }\n.lintje-menu-button__split .lintje-menu-button__trigger--split.lintje-button { width: var(--h-button); padding: 0; }\n/* Busy, a split button's ring takes its icon's square: the label stays and nothing moves. */\n.lintje-menu-button__busy {\n  flex: none;\n  width: 16px; height: 16px;\n  margin: 2px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: var(--radius-round);\n  animation: lintje-spin var(--dur-skeleton) linear infinite;\n}\n.lintje-menu-button__split .is-working { cursor: progress; }\n@media (prefers-reduced-motion: reduce) {\n  .lintje-menu-button__busy { animation: none; }\n}\n.lintje-menu-button__trigger.lintje-button--primary.is-open { background: var(--color-action-primary-hover); }\n/* Disabled, like the link button, it only loses its ink. */\n.lintje-menu-button__trigger--flat.lintje-button.is-disabled { background: none; border-color: transparent; }\n\n/* Without a sentence the live region stays in the tree but takes no room, and no gap. */\n.lintje-menu-button__status { position: absolute; }\n.lintje-menu-button__status.is-busy {\n  position: static;\n  display: flex; align-items: center; gap: var(--space-2);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n/* The breadcrumbs' \"…\" sits in a line of text, so it reaches the 48 px target upwards and\n   downwards only, through a transparent hit area. */\n.lintje-menu-button__trigger--ellipsis {\n  position: relative;\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: var(--h-chip-field); height: var(--h-chip-field);\n  padding: 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  color: var(--color-accent-text);\n  font: var(--text-small);\n  font-weight: 700;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-menu-button__trigger--ellipsis::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-menu-button__trigger--ellipsis:hover:not(.is-disabled),\n.lintje-menu-button__trigger--ellipsis.is-open { background: var(--color-bg-selected); }\n.lintje-menu-button__trigger--ellipsis.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n.lintje-menu {\n  display: flex; flex-direction: column;\n  min-width: 240px;\n  padding: var(--space-1) 0;\n}\n\n.lintje-menu__row {\n  display: flex; align-items: center; gap: var(--space-2);\n  width: 100%;\n  height: var(--h-control);\n  padding: 0 var(--space-4);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  text-align: left;\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-menu__row:hover:not(.is-disabled) { background: var(--color-bg-subtle); }\n.lintje-menu__icon { flex: none; }\n.lintje-menu__slot { width: 16px; height: 16px; }\n.lintje-menu__check { color: var(--color-accent-text); }\n/* One of a choice: the form's radio, at the size of the menu's icons. */\n.lintje-menu__radio {\n  box-sizing: border-box;\n  width: 16px; height: 16px;\n  border: 2px solid var(--color-border-choice);\n  border-radius: var(--radius-round);\n  background: var(--color-bg-surface);\n  display: inline-flex; align-items: center; justify-content: center;\n}\n.lintje-menu__radio.is-checked { border-color: var(--color-accent-line); }\n.lintje-menu__radio.is-checked::after {\n  content: '';\n  width: 6px; height: 6px;\n  border-radius: var(--radius-round);\n  background: var(--color-accent);\n}\n@media (forced-colors: active) {\n  .lintje-menu__radio.is-checked::after { forced-color-adjust: none; background: Highlight; }\n}\n.lintje-menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.lintje-menu__hint {\n  flex: none;\n  margin-left: var(--space-4);\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n}\n\n.lintje-menu__row.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-menu__row.is-disabled .lintje-menu__hint { color: var(--color-text-disabled); }\n.lintje-menu__row.is-danger { color: var(--color-error-text); font-weight: 700; }\n\n.lintje-menu__separator {\n  height: 1px;\n  margin: var(--space-1) 0;\n  background: var(--color-border-default);\n}\n\n.lintje-menu__tip { display: flex; }\n\n/* The heading stands in line with the labels: the row's padding, the icon and the gap. */\n/* A group's name stands at the menu's edge, over the checks and circles of its rows. */\n.lintje-menu__heading {\n  padding: var(--space-1) var(--space-4);\n  font: var(--text-small);\n  font-weight: 700;\n  color: var(--color-text-muted);\n}\n\n@media (max-width: 767px) {\n  .lintje-menu__row { height: var(--h-touch); }\n}\n\n/* Forced colours: the disabled \"…\" is `aria-disabled`, so the browser does not gray it. */\n@media (forced-colors: active) {\n  .lintje-menu-button__trigger--ellipsis.is-disabled { color: GrayText; }\n}\n", m = (e) => e !== "separator" && !("heading" in e), h = 0;
-function g(e, t, n) {
+import { $ as e, B as t, Bt as n, G as r, Gt as i, Ht as a, I as o, Z as s, et as c, j as l, q as u, qt as d, zt as f } from "../chunks/base-Bg-IFOPG.js";
+//#region src/components/shared/menu.css?inline
+var p = "/* The rows of a menu, in the popover of a menu button, the user menu or a map's select button.\n   The trigger is the owner's. */\n\n.lintje-menu {\n  display: flex; flex-direction: column;\n  min-width: 240px;\n  padding: var(--space-1) 0;\n}\n\n.lintje-menu__row {\n  display: flex; align-items: center; gap: var(--space-2);\n  width: 100%;\n  height: var(--h-control);\n  padding: 0 var(--space-4);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  text-align: left;\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-menu__row:hover:not(.is-disabled) { background: var(--color-bg-subtle); }\n.lintje-menu__icon { flex: none; }\n.lintje-menu__slot { width: 16px; height: 16px; }\n.lintje-menu__check { color: var(--color-accent-text); }\n/* One of a choice: the form's radio, at the size of the menu's icons. */\n.lintje-menu__radio {\n  box-sizing: border-box;\n  width: 16px; height: 16px;\n  border: 2px solid var(--color-border-choice);\n  border-radius: var(--radius-round);\n  background: var(--color-bg-surface);\n  display: inline-flex; align-items: center; justify-content: center;\n}\n.lintje-menu__radio.is-checked { border-color: var(--color-accent-line); }\n.lintje-menu__radio.is-checked::after {\n  content: '';\n  width: 6px; height: 6px;\n  border-radius: var(--radius-round);\n  background: var(--color-accent);\n}\n@media (forced-colors: active) {\n  .lintje-menu__radio.is-checked::after { forced-color-adjust: none; background: Highlight; }\n}\n.lintje-menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.lintje-menu__hint {\n  flex: none;\n  margin-left: var(--space-4);\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n}\n\n.lintje-menu__row.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-menu__row.is-disabled .lintje-menu__hint { color: var(--color-text-disabled); }\n.lintje-menu__row.is-danger { color: var(--color-error-text); font-weight: 700; }\n\n.lintje-menu__separator {\n  height: 1px;\n  margin: var(--space-1) 0;\n  background: var(--color-border-default);\n}\n\n.lintje-menu__tip { display: flex; }\n\n/* The heading stands in line with the labels: the row's padding, the icon and the gap. */\n/* A group's name stands at the menu's edge, over the checks and circles of its rows. */\n.lintje-menu__heading {\n  padding: var(--space-1) var(--space-4);\n  font: var(--text-small);\n  font-weight: 700;\n  color: var(--color-text-muted);\n}\n\n@media (max-width: 767px) {\n  .lintje-menu__row { height: var(--h-touch); }\n}\n", m = "/* The host is the trigger's box, with the busy sentence beside it; the menu is a fixed popover\n   and takes no space. */\n:host {\n  display: inline-flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-3);\n  min-width: 0;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-menu-button__trigger.lintje-button--secondary.is-open { background: var(--color-bg-selected); }\n.lintje-menu-button__trigger.lintje-button--tertiary.is-open { background: var(--color-bg-subtle); }\n.lintje-menu-button__trigger.lintje-icon-button--outlined.is-open { background: var(--color-bg-selected); }\n.lintje-menu-button__trigger.lintje-icon-button--flat.is-open { background: var(--color-bg-subtle); }\n\n\n.lintje-menu-button__trigger.lintje-button { padding-right: var(--space-3); }\n.lintje-menu-button__trigger--flat.lintje-button { padding: 0 var(--space-2); border-color: transparent; }\n/* Split: two halves of one button, the page showing through the 1 px between them. */\n.lintje-menu-button__split { display: inline-flex; gap: 1px; min-width: 0; }\n.lintje-menu-button__split .lintje-menu-button__trigger--split.lintje-button { width: var(--h-button); padding: 0; }\n/* Busy, a split button's ring takes its icon's square: the label stays and nothing moves. */\n.lintje-menu-button__busy {\n  flex: none;\n  width: 16px; height: 16px;\n  margin: 2px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: var(--radius-round);\n  animation: lintje-spin var(--dur-skeleton) linear infinite;\n}\n.lintje-menu-button__split .is-working { cursor: progress; }\n@media (prefers-reduced-motion: reduce) {\n  .lintje-menu-button__busy { animation: none; }\n}\n.lintje-menu-button__trigger.lintje-button--primary.is-open { background: var(--color-action-primary-hover); }\n/* Disabled, like the link button, it only loses its ink. */\n.lintje-menu-button__trigger--flat.lintje-button.is-disabled { background: none; border-color: transparent; }\n\n/* Without a sentence the live region stays in the tree but takes no room, and no gap. */\n.lintje-menu-button__status { position: absolute; }\n.lintje-menu-button__status.is-busy {\n  position: static;\n  display: flex; align-items: center; gap: var(--space-2);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n/* The breadcrumbs' \"…\" sits in a line of text, so it reaches the 48 px target upwards and\n   downwards only, through a transparent hit area. */\n.lintje-menu-button__trigger--ellipsis {\n  position: relative;\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: var(--h-chip-field); height: var(--h-chip-field);\n  padding: 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  color: var(--color-accent-text);\n  font: var(--text-small);\n  font-weight: 700;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-menu-button__trigger--ellipsis::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-menu-button__trigger--ellipsis:hover:not(.is-disabled),\n.lintje-menu-button__trigger--ellipsis.is-open { background: var(--color-bg-selected); }\n.lintje-menu-button__trigger--ellipsis.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n/* Forced colours: the disabled \"…\" is `aria-disabled`, so the browser does not gray it. */\n@media (forced-colors: active) {\n  .lintje-menu-button__trigger--ellipsis.is-disabled { color: GrayText; }\n}\n", h = (e) => e !== "separator" && !("heading" in e), g = 0;
+function _(e, t, n) {
 	let r = [], i = null, a = () => {
 		if (!i) return;
 		let e = `${t}-group-${r.length}`;
-		r.push(s`<div class="lintje-menu__group" role="group" aria-labelledby=${e}>
+		r.push(d`<div class="lintje-menu__group" role="group" aria-labelledby=${e}>
       <div class="lintje-menu__heading" id=${e} role="presentation">${i.heading}</div>
       ${i.rows}
     </div>`), i = null;
 	};
-	for (let t of e) t === "separator" ? (a(), r.push(s`<div class="lintje-menu__separator" role="separator"></div>`)) : m(t) ? i ? i.rows.push(n(t)) : r.push(n(t)) : (a(), i = {
+	for (let t of e) t === "separator" ? (a(), r.push(d`<div class="lintje-menu__separator" role="separator"></div>`)) : h(t) ? i ? i.rows.push(n(t)) : r.push(n(t)) : (a(), i = {
 		heading: t.heading,
 		rows: []
 	});
 	return a(), r;
 }
-function _(e, t, n) {
+function v(e, t, n) {
 	let r = e.length;
 	return r === 0 ? -1 : ((t + n) % r + r) % r;
 }
-function v(e, t, n) {
+function y(e, t, n) {
 	let r = n.toLocaleLowerCase("nl"), i = e.length;
 	for (let n = 1; n <= i; n++) {
 		let a = (t + n) % i, o = e[a];
@@ -28,13 +28,14 @@ function v(e, t, n) {
 	}
 	return -1;
 }
-var y = class extends f {
+var b = class extends f {
 	static {
 		this.styles = [
 			e,
-			a(d),
 			a(u),
-			a(p)
+			a(l),
+			a(p),
+			a(m)
 		];
 	}
 	static {
@@ -81,7 +82,7 @@ var y = class extends f {
 		return this.disabled || !!this.busyLabel;
 	}
 	get rows() {
-		return this.items.filter(m);
+		return this.items.filter(h);
 	}
 	get trigger() {
 		return this.renderRoot.querySelector(".lintje-menu-button__trigger");
@@ -91,13 +92,13 @@ var y = class extends f {
 	}
 	show(e) {
 		let t = this.rows;
-		this.pendingFocus = _(t, e === "first" ? -1 : t.length, e === "first" ? 1 : -1), this.open = !0;
+		this.pendingFocus = v(t, e === "first" ? -1 : t.length, e === "first" ? 1 : -1), this.open = !0;
 	}
 	hide(e) {
 		this.open = !1, e && this.trigger?.focus();
 	}
 	constructor() {
-		super(), this.label = "", this.accessibleLabel = "", this.variant = "secondary", this.icon = !1, this.leadingIcon = "", this.disabled = !1, this.busyLabel = "", this.placement = "bottom-start", this.items = [], this.open = !1, this.split = !1, this.action = "", this.menuId = `lintje-menu-${++h}`, this.pendingFocus = null, this.onFocusOut = (e) => {
+		super(), this.label = "", this.accessibleLabel = "", this.variant = "secondary", this.icon = !1, this.leadingIcon = "", this.disabled = !1, this.busyLabel = "", this.placement = "bottom-start", this.items = [], this.open = !1, this.split = !1, this.action = "", this.menuId = `lintje-menu-${++g}`, this.pendingFocus = null, this.onFocusOut = (e) => {
 			let t = e.relatedTarget;
 			this.open && t && !r(t, this) && !r(this, t) && this.hide(!1);
 		}, this.onTriggerKeydown = (e) => {
@@ -108,16 +109,16 @@ var y = class extends f {
 			let t = this.rows, n = this.currentRow();
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), this.focusRow(_(t, n, 1));
+					e.preventDefault(), this.focusRow(v(t, n, 1));
 					return;
 				case "ArrowUp":
-					e.preventDefault(), this.focusRow(_(t, n < 0 ? t.length : n, -1));
+					e.preventDefault(), this.focusRow(v(t, n < 0 ? t.length : n, -1));
 					return;
 				case "Home":
-					e.preventDefault(), this.focusRow(_(t, -1, 1));
+					e.preventDefault(), this.focusRow(v(t, -1, 1));
 					return;
 				case "End":
-					e.preventDefault(), this.focusRow(_(t, t.length, -1));
+					e.preventDefault(), this.focusRow(v(t, t.length, -1));
 					return;
 				case "Tab":
 					e.shiftKey || this.trigger?.focus(), this.hide(!1);
@@ -127,7 +128,7 @@ var y = class extends f {
 					t instanceof HTMLAnchorElement && (e.preventDefault(), t.click());
 					return;
 				}
-				default: e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && this.focusRow(v(t, n, e.key));
+				default: e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && this.focusRow(y(t, n, e.key));
 			}
 		}, this.addEventListener("focusout", this.onFocusOut);
 	}
@@ -159,10 +160,10 @@ var y = class extends f {
 	}
 	renderSplit() {
 		let e = this.disabled ? "true" : i, t = !!this.busyLabel, n = this.variant === "flat" ? "tertiary" : this.variant;
-		return s`<span class="lintje-menu-button__split">
+		return d`<span class="lintje-menu-button__split">
       <button
         type="button"
-        class=${c({
+        class=${s({
 			"lintje-button": !0,
 			[`lintje-button--${n}`]: !0,
 			"lintje-menu-button__main": !0,
@@ -175,7 +176,7 @@ var y = class extends f {
 			this.unavailable || this.emit("lintje-action", this.action);
 		}}
       >
-        ${t ? s`<span class="lintje-menu-button__busy" aria-hidden="true"></span>` : this.leadingIcon ? l(this.leadingIcon, {
+        ${t ? d`<span class="lintje-menu-button__busy" aria-hidden="true"></span>` : this.leadingIcon ? c(this.leadingIcon, {
 			size: 20,
 			className: "lintje-button__icon"
 		}) : i}
@@ -183,7 +184,7 @@ var y = class extends f {
       </button>
       <button
         type="button"
-        class=${c({
+        class=${s({
 			"lintje-button": !0,
 			[`lintje-button--${n}`]: !0,
 			"lintje-menu-button__trigger": !0,
@@ -200,7 +201,7 @@ var y = class extends f {
         @click=${this.onTriggerClick}
         @keydown=${this.onTriggerKeydown}
       >
-        ${l("functioneel-delta-omlaag", {
+        ${c("functioneel-delta-omlaag", {
 			size: 20,
 			rotate: this.open ? 180 : void 0,
 			className: "lintje-button__icon"
@@ -215,9 +216,9 @@ var y = class extends f {
 			"is-open": this.open,
 			"is-disabled": this.unavailable
 		}, t = this.unavailable ? "true" : i;
-		return this.icon ? s`<button
+		return this.icon ? d`<button
         type="button"
-        class=${c({
+        class=${s({
 			...e,
 			"lintje-icon-button": !0,
 			"lintje-icon-button--outlined": this.variant !== "tertiary",
@@ -232,10 +233,10 @@ var y = class extends f {
         @click=${this.onTriggerClick}
         @keydown=${this.onTriggerKeydown}
       >
-        ${l("functioneel-meer", { size: 16 })}
-      </button>` : this.variant === "ellipsis" ? s`<button
+        ${c("functioneel-meer", { size: 16 })}
+      </button>` : this.variant === "ellipsis" ? d`<button
         type="button"
-        class=${c({
+        class=${s({
 			...e,
 			"lintje-menu-button__trigger--ellipsis": !0
 		})}
@@ -248,9 +249,9 @@ var y = class extends f {
         @keydown=${this.onTriggerKeydown}
       >
         …
-      </button>` : s`<button
+      </button>` : d`<button
       type="button"
-      class=${c({
+      class=${s({
 			...e,
 			"lintje-button": !0,
 			[`lintje-button--${this.variant === "flat" ? "tertiary" : this.variant}`]: !0,
@@ -264,12 +265,12 @@ var y = class extends f {
       @click=${this.onTriggerClick}
       @keydown=${this.onTriggerKeydown}
     >
-      ${this.leadingIcon ? l(this.leadingIcon, {
+      ${this.leadingIcon ? c(this.leadingIcon, {
 			size: 16,
 			className: "lintje-button__icon"
 		}) : i}
       <span class="lintje-button__label">${this.label}</span>
-      ${l("functioneel-delta-omlaag", {
+      ${c("functioneel-delta-omlaag", {
 			size: 16,
 			rotate: this.open ? 180 : void 0,
 			className: "lintje-button__icon"
@@ -277,33 +278,33 @@ var y = class extends f {
     </button>`;
 	}
 	renderRow(e) {
-		let t = c({
+		let t = s({
 			"lintje-menu__row": !0,
 			"focus-inset": !0,
 			"is-danger": !!e.danger,
 			"is-disabled": !!e.disabled
 		}), n = e.checked !== void 0, r = n ? e.radio ? "menuitemradio" : "menuitemcheckbox" : "menuitem", a = i;
-		n && e.radio ? a = s`<span
-        class=${c({
+		n && e.radio ? a = d`<span
+        class=${s({
 			"lintje-menu__icon": !0,
 			"lintje-menu__radio": !0,
 			"is-checked": !!e.checked
 		})}
-      ></span>` : n ? a = e.checked ? l("functioneel-vinkje", {
+      ></span>` : n ? a = e.checked ? c("functioneel-vinkje", {
 			size: 16,
 			className: "lintje-menu__icon lintje-menu__check"
-		}) : s`<span class="lintje-menu__icon lintje-menu__slot"></span>` : e.icon && (a = l(e.icon, {
+		}) : d`<span class="lintje-menu__icon lintje-menu__slot"></span>` : e.icon && (a = c(e.icon, {
 			size: 16,
 			className: "lintje-menu__icon"
 		}));
-		let o = s`${a}<span class="lintje-menu__label">${e.label}</span>${e.hint ? s`<span class="lintje-menu__hint">${e.hint}</span>` : i}`, u = e.href && !e.disabled ? s`<a
+		let o = d`${a}<span class="lintje-menu__label">${e.label}</span>${e.hint ? d`<span class="lintje-menu__hint">${e.hint}</span>` : i}`, l = e.href && !e.disabled ? d`<a
             class=${t}
             role="menuitem"
             tabindex="-1"
             href=${e.href}
             @click=${(t) => this.choose(e, t)}
             >${o}</a
-          >` : s`<button
+          >` : d`<button
             type="button"
             class=${t}
             role=${r}
@@ -314,11 +315,11 @@ var y = class extends f {
           >
             ${o}
           </button>`;
-		return e.disabled && e.reason ? s`<lintje-tooltip class="lintje-menu__tip" text=${e.reason}>${u}</lintje-tooltip>` : u;
+		return e.disabled && e.reason ? d`<lintje-tooltip class="lintje-menu__tip" text=${e.reason}>${l}</lintje-tooltip>` : l;
 	}
 	render() {
 		let e = !!this.busyLabel;
-		return s`${this.renderTrigger()}<lintje-popover
+		return d`${this.renderTrigger()}<lintje-popover
         id=${this.menuId}
         panel-role="menu"
         label=${t(this.accessibleLabel || this.label || void 0)}
@@ -326,18 +327,18 @@ var y = class extends f {
         ?open=${this.open}
         @lintje-close=${this.onPopoverClose}
       >
-        <div class="lintje-menu" @keydown=${this.onMenuKeydown}>${g(this.items, this.menuId, (e) => this.renderRow(e))}</div>
+        <div class="lintje-menu" @keydown=${this.onMenuKeydown}>${_(this.items, this.menuId, (e) => this.renderRow(e))}</div>
       </lintje-popover
       ><div
-        class=${c({
+        class=${s({
 			"lintje-menu-button__status": !0,
 			"is-busy": e && !this.split,
 			"visually-hidden": e && this.split
 		})}
         role="status"
-      >${e ? s`<lintje-spinner></lintje-spinner><span>${this.busyLabel}</span>` : i}</div>`;
+      >${e ? d`<lintje-spinner></lintje-spinner><span>${this.busyLabel}</span>` : i}</div>`;
 	}
 };
-n("lintje-menu-button", y);
+n("lintje-menu-button", b);
 //#endregion
-export { y as LintjeMenuButton, _ as nextRow, g as renderMenuEntries, v as rowByLetter, p as t };
+export { b as LintjeMenuButton, p as n, v as nextRow, _ as renderMenuEntries, y as rowByLetter, m as t };

package/dist-elements/tag/modal.js

@@ -1,5 +1,5 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Nt as a, et as o, zt as s } from "../chunks/base-rBLTcEIv.js";
-import { t as c } from "../chunks/focus-trap-w3vCamJ6.js";
+import { $ as e, Bt as t, Gt as n, Ht as r, Nt as i, et as a, qt as o, zt as s } from "../chunks/base-Bg-IFOPG.js";
+import { t as c } from "../chunks/focus-trap-9BnE-xWv.js";
 import { t as l } from "../chunks/dialog-close-u75fVEw4.js";
 //#region src/components/overlays/modal/modal.css?inline
 var u = "/* `display: contents` keeps the host out of its parent's flex or grid layout. */\n:host {\n  display: contents;\n}\n\n/* ------------------------------------------------------------------------ */\n\n/* Covers the whole viewport, above the shell's menu (z-index 30). */\n.lintje-modal__scrim {\n  position: fixed; z-index: 80;\n  inset: 0;\n  background: var(--color-overlay-page);\n  display: flex; align-items: center; justify-content: center;\n  padding: var(--space-6);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n.lintje-modal {\n  width: min(1200px, 100%);\n  height: 100%;\n  max-height: 100%;\n  display: flex; flex-direction: column;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-strong);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-modal) var(--ease-in-motion);\n}\n.lintje-modal:focus { outline: none; }\n\n.lintje-modal__header {\n  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);\n  padding: var(--space-5) var(--space-6);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-modal__title { font: var(--text-h2); }\n.lintje-modal__subtitle { font: var(--text-tile-sub); color: var(--color-text-muted); margin-top: var(--space-1); }\n.lintje-modal__close:hover { color: var(--color-text-primary); }\n\n.lintje-modal__body {\n  flex: 1; min-height: 0; overflow: auto;\n  padding: var(--space-5) var(--space-6);\n  /* LintjeModal sets --chart-h-expanded on this body; a chart reads its own height token. */\n  --chart-h-main: var(--chart-h-expanded);\n  --chart-h-small: var(--chart-h-expanded);\n}\n\n.lintje-modal__footer {\n  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);\n  padding: var(--space-3) var(--space-6);\n  border-top: 1px solid var(--color-border-default);\n  font: var(--text-meta); color: var(--color-text-muted);\n}\n.lintje-modal__actions { display: flex; gap: var(--space-2); }\n.lintje-modal__actions[hidden] { display: none; }\n/* Narrow: a dialog with a form, as high as it needs and as wide as a form reads. */\n:host([narrow]) .lintje-modal { width: min(calc(15 * var(--space-10)), 100%); height: auto; }\n/* A form's dialog has a title of one line: the close button stands in line with it. */\n:host([narrow]) .lintje-modal__header { align-items: center; padding-block: var(--space-4); }\n:host([narrow]) .lintje-modal__footer { font: var(--text-ui); color: var(--color-text-primary); }\n\n@media (max-width: 767px) {\n  .lintje-modal__scrim { padding: 0; align-items: stretch; }\n  .lintje-modal { max-height: 100%; height: 100%; }\n  .lintje-modal__body { --chart-h-main: 320px; --chart-h-small: 320px; }\n}\n", d = class extends s {
@@ -60,7 +60,7 @@ var u = "/* `display: contents` keeps the host out of its parent's flex or grid
 		this.emit("lintje-close");
 	}
 	#a() {
-		this.#e = a(), document.addEventListener("keydown", this.#r);
+		this.#e = i(), document.addEventListener("keydown", this.#r);
 		let e = this.renderRoot.querySelector(".lintje-modal");
 		e && this.#t.activate(e);
 	}
@@ -68,7 +68,7 @@ var u = "/* `display: contents` keeps the host out of its parent's flex or grid
 		this.#e && (this.#n?.disconnect(), this.#n = null, document.removeEventListener("keydown", this.#r), this.#e(), this.#e = null, this.#t.deactivate());
 	}
 	render() {
-		return this.open ? i`<div class="lintje-modal__scrim" @click=${() => this.close()}>
+		return this.open ? o`<div class="lintje-modal__scrim" @click=${() => this.close()}>
       <div
         class="lintje-modal"
         role="dialog"
@@ -80,7 +80,7 @@ var u = "/* `display: contents` keeps the host out of its parent's flex or grid
         <header class="lintje-modal__header">
           <div>
             <h2 class="lintje-modal__title">${this.heading}</h2>
-            ${this.subtitle ? i`<p class="lintje-modal__subtitle">${this.subtitle}</p>` : n}
+            ${this.subtitle ? o`<p class="lintje-modal__subtitle">${this.subtitle}</p>` : n}
           </div>
           <button
             type="button"
@@ -88,7 +88,7 @@ var u = "/* `display: contents` keeps the host out of its parent's flex or grid
             aria-label="Sluiten"
             @click=${() => this.close()}
           >
-            ${o("functioneel-kruis", { size: 16 })}
+            ${a("functioneel-kruis", { size: 16 })}
           </button>
         </header>
 
@@ -101,15 +101,15 @@ var u = "/* `display: contents` keeps the host out of its parent's flex or grid
           <span><slot name="footer" @slotchange=${this.onFooterSlotChange}></slot></span>
           <div class="lintje-modal__actions" ?hidden=${!this.csv && !this.png && !this.actionsSlotted}>
             <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
-          ${this.csv || this.png ? i`
-                ${this.csv ? i`<lintje-button
+          ${this.csv || this.png ? o`
+                ${this.csv ? o`<lintje-button
                       variant="tertiary"
                       size="compact"
                       icon="functioneel-downloaden"
                       @click=${() => this.emit("lintje-download-csv")}
                       >CSV</lintje-button
                     >` : n}
-                ${this.png ? i`<lintje-button
+                ${this.png ? o`<lintje-button
                       variant="tertiary"
                       size="compact"
                       icon="functioneel-downloaden"

package/dist-elements/tag/multiselect.js

@@ -1,6 +1,6 @@
-import { $ as e, Bt as t, G as n, Gt as r, Ht as i, Kt as a, U as o, W as s, Z as c, et as l, ut as u } from "../chunks/base-rBLTcEIv.js";
-import "../chunks/focus-trap-w3vCamJ6.js";
-import { r as d, t as f } from "../chunks/input-jQVTln7H.js";
+import { $ as e, Bt as t, G as n, Gt as r, Ht as i, U as a, W as o, Z as s, et as c, qt as l, ut as u } from "../chunks/base-Bg-IFOPG.js";
+import "../chunks/focus-trap-9BnE-xWv.js";
+import { r as d, t as f } from "../chunks/input-BtuNFSWk.js";
 import "./checkbox.js";
 //#region src/components/inputs/multiselect/multiselect.css?inline
 var p = "/* The multi-select's trigger, chips and list. */\n\n/* --- Multi-select --------------------------------------------------------- */\n.lintje-multiselect { position: relative; }\n.lintje-multiselect__field {\n  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;\n  width: 100%; min-height: var(--h-control);\n  padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  text-align: left;\n  overflow: hidden;\n}\n.lintje-multiselect__shown { display: contents; }\n.lintje-multiselect__field.is-error { border: 2px solid var(--color-error); }\n.lintje-multiselect__field:disabled {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-multiselect__summary {\n  flex: 1 1 auto; min-width: 0;\n  padding-left: var(--space-1);\n  font: var(--text-ui);\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.lintje-multiselect__placeholder { color: var(--color-text-placeholder); font-size: 1rem; padding-left: 6px; }\n.lintje-multiselect__chip {\n  display: inline-flex; align-items: center; gap: 6px;\n  height: var(--h-chip-field);\n  padding: 0 0 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  font-size: 0.875rem; white-space: nowrap;\n  /* The label shortens with an ellipsis, the cross and counter never shrink; the whole\n     selection is in the field's `title`. */\n  flex: 0 1 auto; min-width: 0;\n}\n.lintje-multiselect__chip-label { overflow: hidden; text-overflow: ellipsis; min-width: 2ch; }\n/* A transparent hit area reaches the target height, not sideways: the label opens the list. */\n.lintje-multiselect__chip-remove {\n  position: relative;\n  flex: none;\n  width: var(--space-6); align-self: stretch;\n  display: flex; align-items: center; justify-content: center;\n  cursor: pointer; color: var(--color-text-muted); font-size: 1rem;\n}\n.lintje-multiselect__chip-remove::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((var(--h-chip-field) - var(--h-target)) / 2)) 0;\n}\n.lintje-multiselect__overflow { font-size: 0.875rem; color: var(--color-text-muted); flex: none; }\n.lintje-multiselect__scrim { position: fixed; inset: 0; z-index: 45; }\n/* Fixed to the viewport: an absolute popover is cut off by a scrolling box around it. A column,\n   so the list shrinks when the room is short. */\n.lintje-multiselect__popover {\n  position: fixed; z-index: 46;\n  min-width: 260px;\n  max-height: var(--lintje-multiselect-space, none);\n  display: flex; flex-direction: column;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-multiselect__search { flex: none; padding: var(--space-2); border-bottom: 1px solid var(--color-border-default); }\n.lintje-multiselect__search-input {\n  width: 100%; height: var(--h-control); padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface); color: var(--color-text-primary); font-size: 1rem;\n}\n.lintje-multiselect__search-input::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-multiselect__list {\n  flex: 1 1 auto; min-height: 0;\n  max-height: 220px; overflow-y: auto;\n  padding: var(--space-2);\n  display: flex; flex-direction: column; gap: 2px;\n}\n/* The `lintje-checkbox` row reads `--h-target` in its shadow root: point it at the option height. */\n.lintje-multiselect__option { --h-target: var(--h-option); }\n.lintje-multiselect__no-results { font: var(--text-small); color: var(--color-text-muted); padding: var(--space-2); }\n.lintje-multiselect__footer {\n  flex: none;\n  display: flex; align-items: center; justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  border-top: 1px solid var(--color-border-default);\n  font: var(--text-small); color: var(--color-text-muted);\n}\n.lintje-multiselect__clear {\n  min-height: var(--h-target);\n  color: var(--color-link); font-weight: 700; text-decoration: underline;\n}\n", m = 4, h = 8, g = 260, _ = 180, v = "lintje-multiselect-value", y = "lintje-multiselect-shown";
@@ -21,7 +21,7 @@ var S = (e) => e === 1 ? "1 resultaat" : `${e} resultaten`, C = class extends d
 		super(...e), this.placeholder = "Kies één of meer…", this.stacked = !1, this.open = !1, this.query = "", this.anchor = null, this.news = "", this.reflowFrame = 0, this.onOutsideClick = (e) => {
 			this.open && (e.composedPath().includes(this) || (this.open = !1));
 		}, this.onEscape = (e) => {
-			this.open && e.key === "Escape" && s(this) && (e.stopPropagation(), this.close());
+			this.open && e.key === "Escape" && o(this) && (e.stopPropagation(), this.close());
 		}, this.onReflow = () => {
 			this.open && !this.reflowFrame && (this.reflowFrame = requestAnimationFrame(() => {
 				this.reflowFrame = 0, this.measure();
@@ -58,7 +58,7 @@ var S = (e) => e === 1 ? "1 resultaat" : `${e} resultaten`, C = class extends d
 		return this.renderRoot.querySelector(".lintje-multiselect__field");
 	}
 	async close() {
-		let e = this.renderRoot.querySelector(".lintje-multiselect__popover"), t = e !== null && o(e);
+		let e = this.renderRoot.querySelector(".lintje-multiselect__popover"), t = e !== null && a(e);
 		this.open = !1, this.query = "", await this.updateComplete, t && this.trigger?.focus();
 	}
 	onFocusOut(e) {
@@ -109,23 +109,23 @@ var S = (e) => e === 1 ? "1 resultaat" : `${e} resultaten`, C = class extends d
 		let t = this.selected ?? [];
 		this.choose(t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
 	}
-	checkbox(e, t, n, i, o) {
-		return a`<lintje-checkbox
+	checkbox(e, t, n, i, a) {
+		return l`<lintje-checkbox
       class="lintje-multiselect__option"
       label=${e}
-      hint=${o ?? r}
+      hint=${a ?? r}
       ?checked=${t}
       ?indeterminate=${n && !t}
       @lintje-change=${(e) => i(e.detail)}
     ></lintje-checkbox>`;
 	}
 	render() {
-		let e = this.options ?? [], t = this.selected ?? [], n = this.query.trim().toLowerCase(), i = e.filter((e) => x(e).toLowerCase().includes(n)), o = t.length === e.length, s = t.length > 0 && !o, d = t.slice(0, 2), f = t.length - d.length, p = t.map((t) => e.find((e) => e.value === t)?.label ?? t);
-		return a`<div class="lintje-field lintje-multiselect" @focusout=${this.onFocusOut}>
+		let e = this.options ?? [], t = this.selected ?? [], n = this.query.trim().toLowerCase(), i = e.filter((e) => x(e).toLowerCase().includes(n)), a = t.length === e.length, o = t.length > 0 && !a, d = t.slice(0, 2), f = t.length - d.length, p = t.map((t) => e.find((e) => e.value === t)?.label ?? t);
+		return l`<div class="lintje-field lintje-multiselect" @focusout=${this.onFocusOut}>
       ${this.renderLabel()}
       <button
         type="button"
-        class=${c({
+        class=${s({
 			"lintje-multiselect__field": !0,
 			"is-error": !!this.error
 		})}
@@ -142,9 +142,9 @@ var S = (e) => e === 1 ? "1 resultaat" : `${e} resultaten`, C = class extends d
       >
         <span id=${v} class="visually-hidden">${this.valueText(p)}</span>
         <!-- What the button shows is part of its name, so a voice command can use it (WCAG 2.5.3). -->
-        <span id=${y} class="lintje-multiselect__shown">        ${this.summary ? a`<span class="lintje-multiselect__summary">${this.summary}</span>${l("functioneel-delta-omlaag", { size: 16 })}` : r}
-        ${t.length === 0 && !this.summary ? a`<span class="lintje-multiselect__placeholder">${this.placeholder}</span>` : r}
-        ${(this.summary ? [] : d).map((t) => a`<span class="lintje-multiselect__chip">
+        <span id=${y} class="lintje-multiselect__shown">        ${this.summary ? l`<span class="lintje-multiselect__summary">${this.summary}</span>${c("functioneel-delta-omlaag", { size: 16 })}` : r}
+        ${t.length === 0 && !this.summary ? l`<span class="lintje-multiselect__placeholder">${this.placeholder}</span>` : r}
+        ${(this.summary ? [] : d).map((t) => l`<span class="lintje-multiselect__chip">
             <span class="lintje-multiselect__chip-label"
               >${e.find((e) => e.value === t)?.label}</span
             >
@@ -160,11 +160,11 @@ var S = (e) => e === 1 ? "1 resultaat" : `${e} resultaten`, C = class extends d
               >×</span
             >
           </span>`)}
-        ${f > 0 && !this.summary ? a`<span class="lintje-multiselect__overflow">+${f}</span>` : r}</span
+        ${f > 0 && !this.summary ? l`<span class="lintje-multiselect__overflow">+${f}</span>` : r}</span
         >
       </button>
 
-      ${this.open ? a`<span
+      ${this.open ? l`<span
               class="lintje-multiselect__scrim"
               @click=${() => void this.close()}
             ></span>
@@ -184,9 +184,9 @@ var S = (e) => e === 1 ? "1 resultaat" : `${e} resultaten`, C = class extends d
                 />
               </div>
               <div class="lintje-multiselect__list">
-                ${this.checkbox(`Alles selecteren (${e.length})`, o, s, (t) => this.choose(t ? e.map((e) => e.value) : []))}
+                ${this.checkbox(`Alles selecteren (${e.length})`, a, o, (t) => this.choose(t ? e.map((e) => e.value) : []))}
                 ${i.map((e) => this.checkbox(x(e), t.includes(e.value), !1, () => this.toggleOption(e.value), e.description))}
-                ${i.length === 0 ? a`<p class="lintje-multiselect__no-results">
+                ${i.length === 0 ? l`<p class="lintje-multiselect__no-results">
                       Geen waarde met “${this.query}”.
                     </p>` : r}
               </div>

package/dist-elements/tag/note.js

@@ -1,8 +1,8 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, O as i, k as a } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Gt as t, Ht as n, O as r, k as i, qt as a } from "../chunks/base-Bg-IFOPG.js";
 //#region src/components/charts/note/note.css?inline
-var o = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n.lintje-note { height: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-note {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n  display: flex; flex-direction: column; gap: var(--space-2);\n  min-width: 0;\n}\n.lintje-note__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }\n.lintje-note__title { font: var(--text-tile-title); }\n.lintje-note__date { font: var(--text-tile-sub); color: var(--color-text-muted); }\n.lintje-note__text { font: var(--text-small); line-height: 1.55; color: var(--color-text-secondary); }\n.lintje-note__author { font: var(--text-meta); color: var(--color-text-muted); }\n", s = class extends i {
+var o = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n.lintje-note { height: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-note {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n  display: flex; flex-direction: column; gap: var(--space-2);\n  min-width: 0;\n}\n.lintje-note__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }\n.lintje-note__title { font: var(--text-tile-title); }\n.lintje-note__date { font: var(--text-tile-sub); color: var(--color-text-muted); }\n.lintje-note__text { font: var(--text-small); line-height: 1.55; color: var(--color-text-secondary); }\n.lintje-note__author { font: var(--text-meta); color: var(--color-text-muted); }\n", s = class extends r {
 	static {
-		this.styles = [a, n(o)];
+		this.styles = [i, n(o)];
 	}
 	static {
 		this.properties = { data: { attribute: !1 } };
@@ -12,7 +12,7 @@ var o = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
 	}
 	render() {
 		let e = this.data;
-		return e ? r`<section class="lintje-note">
+		return e ? a`<section class="lintje-note">
       <header class="lintje-note__header">
         <h3 class="lintje-note__title">${e.title ?? "Toelichting analist"}</h3>
         <span class="lintje-note__date">${e.date}</span>