lintje 0.2.0 → 0.3.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, Z as s, et as c, j as l, q as u, qt as d, zt as f } from "../chunks/base-Bg-IFOPG.js";
+import { H as e, Jt as t, K as n, L as r, Yt as i, Zt as a, en as o, et as s, lt as c, nn as l, nt as u, rt as d, st as f, ut as p } from "../chunks/base-CbmWxUig.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) {
+var m = "/* 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 screen and (max-width: 767px) {\n  .lintje-menu__row { height: var(--h-touch); }\n}\n", h = "/* 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", g = (e) => e !== "separator" && !("heading" in e), _ = 0;
+function v(e, t, n) {
 	let r = [], i = null, a = () => {
 		if (!i) return;
 		let e = `${t}-group-${r.length}`;
-		r.push(d`<div class="lintje-menu__group" role="group" aria-labelledby=${e}>
+		r.push(l`<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(d`<div class="lintje-menu__separator" role="separator"></div>`)) : h(t) ? i ? i.rows.push(n(t)) : r.push(n(t)) : (a(), i = {
+	for (let t of e) t === "separator" ? (a(), r.push(l`<div class="lintje-menu__separator" role="separator"></div>`)) : g(t) ? i ? i.rows.push(n(t)) : r.push(n(t)) : (a(), i = {
 		heading: t.heading,
 		rows: []
 	});
 	return a(), r;
 }
-function v(e, t, n) {
+function y(e, t, n) {
 	let r = e.length;
 	return r === 0 ? -1 : ((t + n) % r + r) % r;
 }
-function y(e, t, n) {
+function b(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,14 +28,15 @@ function y(e, t, n) {
 	}
 	return -1;
 }
-var b = class extends f {
+var x = class extends t {
 	static {
 		this.styles = [
-			e,
-			a(u),
-			a(l),
-			a(p),
-			a(m)
+			c,
+			a(d),
+			a(r),
+			a(m),
+			a(h),
+			a(u)
 		];
 	}
 	static {
@@ -82,7 +83,7 @@ var b = class extends f {
 		return this.disabled || !!this.busyLabel;
 	}
 	get rows() {
-		return this.items.filter(h);
+		return this.items.filter(g);
 	}
 	get trigger() {
 		return this.renderRoot.querySelector(".lintje-menu-button__trigger");
@@ -92,15 +93,15 @@ var b = class extends f {
 	}
 	show(e) {
 		let t = this.rows;
-		this.pendingFocus = v(t, e === "first" ? -1 : t.length, e === "first" ? 1 : -1), this.open = !0;
+		this.pendingFocus = y(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-${++g}`, 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-${++_}`, this.pendingFocus = null, this.onFocusOut = (e) => {
 			let t = e.relatedTarget;
-			this.open && t && !r(t, this) && !r(this, t) && this.hide(!1);
+			this.open && t && !s(t, this) && !s(this, t) && this.hide(!1);
 		}, this.onTriggerKeydown = (e) => {
 			this.unavailable || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), this.show(e.key === "ArrowDown" ? "first" : "last"));
 		}, this.onTriggerClick = () => {
@@ -109,16 +110,16 @@ var b = class extends f {
 			let t = this.rows, n = this.currentRow();
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), this.focusRow(v(t, n, 1));
+					e.preventDefault(), this.focusRow(y(t, n, 1));
 					return;
 				case "ArrowUp":
-					e.preventDefault(), this.focusRow(v(t, n < 0 ? t.length : n, -1));
+					e.preventDefault(), this.focusRow(y(t, n < 0 ? t.length : n, -1));
 					return;
 				case "Home":
-					e.preventDefault(), this.focusRow(v(t, -1, 1));
+					e.preventDefault(), this.focusRow(y(t, -1, 1));
 					return;
 				case "End":
-					e.preventDefault(), this.focusRow(v(t, t.length, -1));
+					e.preventDefault(), this.focusRow(y(t, t.length, -1));
 					return;
 				case "Tab":
 					e.shiftKey || this.trigger?.focus(), this.hide(!1);
@@ -128,7 +129,7 @@ var b = class extends f {
 					t instanceof HTMLAnchorElement && (e.preventDefault(), t.click());
 					return;
 				}
-				default: e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && this.focusRow(y(t, n, e.key));
+				default: e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && this.focusRow(b(t, n, e.key));
 			}
 		}, this.addEventListener("focusout", this.onFocusOut);
 	}
@@ -142,12 +143,12 @@ var b = class extends f {
 	onPopoverClose(e) {
 		e.stopPropagation(), this.hide(e.detail?.reason === "escape");
 	}
-	choose(e, t) {
-		if (e.disabled) t.preventDefault();
-		else if (e.href) {
-			if (!o(t)) return;
-			this.hide(!0), this.emit("lintje-action", e.value), this.followLink(e.href, t);
-		} else this.hide(!0), this.emit("lintje-action", e.value);
+	choose(t, n) {
+		if (t.disabled) n.preventDefault();
+		else if (t.href) {
+			if (!e(n)) return;
+			this.hide(!0), this.emit("lintje-action", t.value), this.followLink(t.href, n);
+		} else this.hide(!0), this.emit("lintje-action", t.value);
 	}
 	willUpdate(e) {
 		super.willUpdate(e), (e.has("disabled") || e.has("busyLabel")) && this.unavailable && (this.open = !1);
@@ -159,32 +160,32 @@ var b = class extends f {
 		}
 	}
 	renderSplit() {
-		let e = this.disabled ? "true" : i, t = !!this.busyLabel, n = this.variant === "flat" ? "tertiary" : this.variant;
-		return d`<span class="lintje-menu-button__split">
+		let e = this.disabled ? "true" : o, t = !!this.busyLabel, n = this.variant === "flat" ? "tertiary" : this.variant;
+		return l`<span class="lintje-menu-button__split">
       <button
         type="button"
-        class=${s({
+        class=${f({
 			"lintje-button": !0,
 			[`lintje-button--${n}`]: !0,
 			"lintje-menu-button__main": !0,
 			"is-disabled": this.disabled,
 			"is-working": t
 		})}
-        aria-disabled=${this.disabled ? "true" : i}
-        aria-busy=${t ? "true" : i}
+        aria-disabled=${this.disabled ? "true" : o}
+        aria-busy=${t ? "true" : o}
         @click=${() => {
 			this.unavailable || this.emit("lintje-action", this.action);
 		}}
       >
-        ${t ? d`<span class="lintje-menu-button__busy" aria-hidden="true"></span>` : this.leadingIcon ? c(this.leadingIcon, {
+        ${t ? l`<span class="lintje-menu-button__busy" aria-hidden="true"></span>` : this.leadingIcon ? p(this.leadingIcon, {
 			size: 20,
 			className: "lintje-button__icon"
-		}) : i}
+		}) : o}
         <span class="lintje-button__label">${this.label}</span>
       </button>
       <button
         type="button"
-        class=${s({
+        class=${f({
 			"lintje-button": !0,
 			[`lintje-button--${n}`]: !0,
 			"lintje-menu-button__trigger": !0,
@@ -201,7 +202,7 @@ var b = class extends f {
         @click=${this.onTriggerClick}
         @keydown=${this.onTriggerKeydown}
       >
-        ${c("functioneel-delta-omlaag", {
+        ${p("functioneel-delta-omlaag", {
 			size: 20,
 			rotate: this.open ? 180 : void 0,
 			className: "lintje-button__icon"
@@ -215,10 +216,10 @@ var b = class extends f {
 			"lintje-menu-button__trigger": !0,
 			"is-open": this.open,
 			"is-disabled": this.unavailable
-		}, t = this.unavailable ? "true" : i;
-		return this.icon ? d`<button
+		}, t = this.unavailable ? "true" : o;
+		return this.icon ? l`<button
         type="button"
-        class=${s({
+        class=${f({
 			...e,
 			"lintje-icon-button": !0,
 			"lintje-icon-button--outlined": this.variant !== "tertiary",
@@ -233,10 +234,10 @@ var b = class extends f {
         @click=${this.onTriggerClick}
         @keydown=${this.onTriggerKeydown}
       >
-        ${c("functioneel-meer", { size: 16 })}
-      </button>` : this.variant === "ellipsis" ? d`<button
+        ${p("functioneel-meer", { size: 16 })}
+      </button>` : this.variant === "ellipsis" ? l`<button
         type="button"
-        class=${s({
+        class=${f({
 			...e,
 			"lintje-menu-button__trigger--ellipsis": !0
 		})}
@@ -249,15 +250,15 @@ var b = class extends f {
         @keydown=${this.onTriggerKeydown}
       >
         …
-      </button>` : d`<button
+      </button>` : l`<button
       type="button"
-      class=${s({
+      class=${f({
 			...e,
 			"lintje-button": !0,
 			[`lintje-button--${this.variant === "flat" ? "tertiary" : this.variant}`]: !0,
 			"lintje-menu-button__trigger--flat": this.variant === "flat"
 		})}
-      aria-label=${this.accessibleLabel || i}
+      aria-label=${this.accessibleLabel || o}
       aria-haspopup="menu"
       aria-expanded=${String(this.open)}
       aria-controls=${this.menuId}
@@ -265,12 +266,12 @@ var b = class extends f {
       @click=${this.onTriggerClick}
       @keydown=${this.onTriggerKeydown}
     >
-      ${this.leadingIcon ? c(this.leadingIcon, {
+      ${this.leadingIcon ? p(this.leadingIcon, {
 			size: 16,
 			className: "lintje-button__icon"
-		}) : i}
+		}) : o}
       <span class="lintje-button__label">${this.label}</span>
-      ${c("functioneel-delta-omlaag", {
+      ${p("functioneel-delta-omlaag", {
 			size: 16,
 			rotate: this.open ? 180 : void 0,
 			className: "lintje-button__icon"
@@ -278,67 +279,67 @@ var b = class extends f {
     </button>`;
 	}
 	renderRow(e) {
-		let t = s({
+		let t = f({
 			"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 = d`<span
-        class=${s({
+		}), n = e.checked !== void 0, r = n ? e.radio ? "menuitemradio" : "menuitemcheckbox" : "menuitem", i = o;
+		n && e.radio ? i = l`<span
+        class=${f({
 			"lintje-menu__icon": !0,
 			"lintje-menu__radio": !0,
 			"is-checked": !!e.checked
 		})}
-      ></span>` : n ? a = e.checked ? c("functioneel-vinkje", {
+      ></span>` : n ? i = e.checked ? p("functioneel-vinkje", {
 			size: 16,
 			className: "lintje-menu__icon lintje-menu__check"
-		}) : d`<span class="lintje-menu__icon lintje-menu__slot"></span>` : e.icon && (a = c(e.icon, {
+		}) : l`<span class="lintje-menu__icon lintje-menu__slot"></span>` : e.icon && (i = p(e.icon, {
 			size: 16,
 			className: "lintje-menu__icon"
 		}));
-		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
+		let a = l`${i}<span class="lintje-menu__label">${e.label}</span>${e.hint ? l`<span class="lintje-menu__hint">${e.hint}</span>` : o}`, s = e.href && !e.disabled ? l`<a
             class=${t}
             role="menuitem"
             tabindex="-1"
             href=${e.href}
             @click=${(t) => this.choose(e, t)}
-            >${o}</a
-          >` : d`<button
+            >${a}</a
+          >` : l`<button
             type="button"
             class=${t}
             role=${r}
             tabindex="-1"
-            aria-checked=${n ? String(e.checked) : i}
-            aria-disabled=${e.disabled ? "true" : i}
+            aria-checked=${n ? String(e.checked) : o}
+            aria-disabled=${e.disabled ? "true" : o}
             @click=${(t) => this.choose(e, t)}
           >
-            ${o}
+            ${a}
           </button>`;
-		return e.disabled && e.reason ? d`<lintje-tooltip class="lintje-menu__tip" text=${e.reason}>${l}</lintje-tooltip>` : l;
+		return e.disabled && e.reason ? l`<lintje-tooltip class="lintje-menu__tip" text=${e.reason}>${s}</lintje-tooltip>` : s;
 	}
 	render() {
 		let e = !!this.busyLabel;
-		return d`${this.renderTrigger()}<lintje-popover
+		return l`${this.renderTrigger()}<lintje-popover
         id=${this.menuId}
         panel-role="menu"
-        label=${t(this.accessibleLabel || this.label || void 0)}
+        label=${n(this.accessibleLabel || this.label || void 0)}
         placement=${this.placement}
         ?open=${this.open}
         @lintje-close=${this.onPopoverClose}
       >
-        <div class="lintje-menu" @keydown=${this.onMenuKeydown}>${_(this.items, this.menuId, (e) => this.renderRow(e))}</div>
+        <div class="lintje-menu" @keydown=${this.onMenuKeydown}>${v(this.items, this.menuId, (e) => this.renderRow(e))}</div>
       </lintje-popover
       ><div
-        class=${s({
+        class=${f({
 			"lintje-menu-button__status": !0,
 			"is-busy": e && !this.split,
 			"visually-hidden": e && this.split
 		})}
         role="status"
-      >${e ? d`<lintje-spinner></lintje-spinner><span>${this.busyLabel}</span>` : i}</div>`;
+      >${e ? l`<lintje-spinner></lintje-spinner><span>${this.busyLabel}</span>` : o}</div>`;
 	}
 };
-n("lintje-menu-button", b);
+i("lintje-menu-button", x);
 //#endregion
-export { b as LintjeMenuButton, p as n, v as nextRow, _ as renderMenuEntries, y as rowByLetter, m as t };
+export { x as LintjeMenuButton, m as n, y as nextRow, v as renderMenuEntries, b as rowByLetter, h as t };

package/dist-elements/tag/modal.js

@@ -1,18 +1,16 @@
-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";
+import { Jt as e, Yt as t, Zt as n, en as r, lt as i, nn as a, ut as o } from "../chunks/base-CbmWxUig.js";
+import { t as s } from "../chunks/dialog-close-u75fVEw4.js";
+import { t as c } from "../chunks/dialog-DChINFxD.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 {
+var l = "/* `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\n@media screen and (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", u = class extends e {
 	constructor(...e) {
-		super(...e), this.open = !1, this.heading = "Vergroot", this.csv = !0, this.png = !0, this.narrow = !1, this.footerSlotted = !1, this.actionsSlotted = !1, this.#e = null, this.#t = new c(), this.#n = null, this.#r = (e) => {
-			e.key === "Escape" && this.#t.isTopmost() && this.close();
-		};
+		super(...e), this.open = !1, this.heading = "", this.csv = !1, this.png = !1, this.footerSlotted = !1, this.actionsSlotted = !1, this.#e = new c(() => this.close()), this.#t = null;
 	}
 	static {
 		this.styles = [
-			e,
-			r(l),
-			r(u)
+			i,
+			n(s),
+			n(l)
 		];
 	}
 	static {
@@ -25,10 +23,6 @@ var u = "/* `display: contents` keeps the host out of its parent's flex or grid
 			subtitle: { type: String },
 			csv: { type: Boolean },
 			png: { type: Boolean },
-			narrow: {
-				type: Boolean,
-				reflect: !0
-			},
 			footerSlotted: { state: !0 },
 			actionsSlotted: { state: !0 }
 		};
@@ -42,45 +36,42 @@ var u = "/* `display: contents` keeps the host out of its parent's flex or grid
 	}
 	#e;
 	#t;
-	#n;
-	#r;
 	disconnectedCallback() {
-		this.#o(), super.disconnectedCallback();
+		this.#i(), super.disconnectedCallback();
 	}
 	updated() {
-		this.open && !this.#e ? this.#a() : !this.open && this.#e && this.#o(), this.open && this.#i();
+		this.open && !this.#e.held ? this.#r() : !this.open && this.#e.held && this.#i(), this.open && this.#n();
 	}
-	#i() {
+	#n() {
 		let e = this.renderRoot.querySelector(".lintje-modal__body");
 		if (!e) return;
 		let t = getComputedStyle(e), n = e.clientHeight - parseFloat(t.paddingTop) - parseFloat(t.paddingBottom);
-		n > 0 && e.style.setProperty("--chart-h-expanded", `${Math.floor(n)}px`), !this.#n && typeof ResizeObserver < "u" && (this.#n = new ResizeObserver(() => this.#i()), this.#n.observe(e));
+		n > 0 && e.style.setProperty("--chart-h-expanded", `${Math.floor(n)}px`), !this.#t && typeof ResizeObserver < "u" && (this.#t = new ResizeObserver(() => this.#n()), this.#t.observe(e));
 	}
 	close() {
 		this.emit("lintje-close");
 	}
-	#a() {
-		this.#e = i(), document.addEventListener("keydown", this.#r);
+	#r() {
 		let e = this.renderRoot.querySelector(".lintje-modal");
-		e && this.#t.activate(e);
+		e && (this.#e.hold(e), e.focus());
 	}
-	#o() {
-		this.#e && (this.#n?.disconnect(), this.#n = null, document.removeEventListener("keydown", this.#r), this.#e(), this.#e = null, this.#t.deactivate());
+	#i() {
+		this.#e.held && (this.#t?.disconnect(), this.#t = null, this.#e.release());
 	}
 	render() {
-		return this.open ? o`<div class="lintje-modal__scrim" @click=${() => this.close()}>
+		return this.open ? a`<div class="lintje-modal__scrim" @click=${() => this.close()}>
       <div
         class="lintje-modal"
         role="dialog"
         aria-modal="true"
-        aria-label=${this.heading}
+        aria-label=${this.heading.trim() || "Venster"}
         tabindex="-1"
         @click=${(e) => e.stopPropagation()}
       >
         <header class="lintje-modal__header">
           <div>
             <h2 class="lintje-modal__title">${this.heading}</h2>
-            ${this.subtitle ? o`<p class="lintje-modal__subtitle">${this.subtitle}</p>` : n}
+            ${this.subtitle ? a`<p class="lintje-modal__subtitle">${this.subtitle}</p>` : r}
           </div>
           <button
             type="button"
@@ -88,7 +79,7 @@ var u = "/* `display: contents` keeps the host out of its parent's flex or grid
             aria-label="Sluiten"
             @click=${() => this.close()}
           >
-            ${a("functioneel-kruis", { size: 16 })}
+            ${o("functioneel-kruis", { size: 16 })}
           </button>
         </header>
 
@@ -101,27 +92,27 @@ 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 ? o`
-                ${this.csv ? o`<lintje-button
+          ${this.csv || this.png ? a`
+                ${this.csv ? a`<lintje-button
                       variant="tertiary"
                       size="compact"
                       icon="functioneel-downloaden"
                       @click=${() => this.emit("lintje-download-csv")}
                       >CSV</lintje-button
-                    >` : n}
-                ${this.png ? o`<lintje-button
+                    >` : r}
+                ${this.png ? a`<lintje-button
                       variant="tertiary"
                       size="compact"
                       icon="functioneel-downloaden"
                       @click=${() => this.emit("lintje-download-png")}
                       >PNG</lintje-button
-                    >` : n}` : n}
+                    >` : r}` : r}
           </div>
         </footer>
       </div>
-    </div>` : n;
+    </div>` : r;
 	}
 };
-t("lintje-modal", d);
+t("lintje-modal", u);
 //#endregion
-export { d as LintjeModal };
+export { u as LintjeModal };