lintje 0.1.1

package/dist-elements/tag/menu-button.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/actions/menu-button/menu-button.js'

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

@@ -0,0 +1,343 @@
+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) {
+	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}>
+      <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 = {
+		heading: t.heading,
+		rows: []
+	});
+	return a(), r;
+}
+function _(e, t, n) {
+	let r = e.length;
+	return r === 0 ? -1 : ((t + n) % r + r) % r;
+}
+function v(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];
+		if (o && o.label.toLocaleLowerCase("nl").startsWith(r)) return a;
+	}
+	return -1;
+}
+var y = class extends f {
+	static {
+		this.styles = [
+			e,
+			a(d),
+			a(u),
+			a(p)
+		];
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			accessibleLabel: {
+				type: String,
+				attribute: "accessible-label"
+			},
+			variant: {
+				type: String,
+				reflect: !0
+			},
+			icon: {
+				type: Boolean,
+				reflect: !0
+			},
+			leadingIcon: {
+				type: String,
+				attribute: "leading-icon"
+			},
+			disabled: {
+				type: Boolean,
+				reflect: !0
+			},
+			busyLabel: {
+				type: String,
+				attribute: "busy-label"
+			},
+			placement: { type: String },
+			items: { attribute: !1 },
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			split: {
+				type: Boolean,
+				reflect: !0
+			},
+			action: { type: String }
+		};
+	}
+	get unavailable() {
+		return this.disabled || !!this.busyLabel;
+	}
+	get rows() {
+		return this.items.filter(m);
+	}
+	get trigger() {
+		return this.renderRoot.querySelector(".lintje-menu-button__trigger");
+	}
+	rowElements() {
+		return [...this.renderRoot.querySelectorAll(".lintje-menu__row")];
+	}
+	show(e) {
+		let t = this.rows;
+		this.pendingFocus = _(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) => {
+			let t = e.relatedTarget;
+			this.open && t && !r(t, this) && !r(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 = () => {
+			this.unavailable || (this.open ? this.hide(!1) : this.show("first"));
+		}, this.onMenuKeydown = (e) => {
+			let t = this.rows, n = this.currentRow();
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), this.focusRow(_(t, n, 1));
+					return;
+				case "ArrowUp":
+					e.preventDefault(), this.focusRow(_(t, n < 0 ? t.length : n, -1));
+					return;
+				case "Home":
+					e.preventDefault(), this.focusRow(_(t, -1, 1));
+					return;
+				case "End":
+					e.preventDefault(), this.focusRow(_(t, t.length, -1));
+					return;
+				case "Tab":
+					e.shiftKey || this.trigger?.focus(), this.hide(!1);
+					return;
+				case " ": {
+					let t = this.rowElements()[n];
+					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));
+			}
+		}, this.addEventListener("focusout", this.onFocusOut);
+	}
+	focusRow(e) {
+		e < 0 || this.rowElements()[e]?.focus();
+	}
+	currentRow() {
+		let e = this.shadowRoot?.activeElement;
+		return this.rowElements().findIndex((t) => t === e);
+	}
+	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);
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("disabled") || e.has("busyLabel")) && this.unavailable && (this.open = !1);
+	}
+	updated(e) {
+		if (super.updated(e), this.open && this.pendingFocus !== null) {
+			let e = this.pendingFocus;
+			this.pendingFocus = null, (this.renderRoot.querySelector("lintje-popover")?.updateComplete ?? Promise.resolve()).then(() => this.focusRow(e));
+		}
+	}
+	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">
+      <button
+        type="button"
+        class=${c({
+			"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}
+        @click=${() => {
+			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, {
+			size: 20,
+			className: "lintje-button__icon"
+		}) : i}
+        <span class="lintje-button__label">${this.label}</span>
+      </button>
+      <button
+        type="button"
+        class=${c({
+			"lintje-button": !0,
+			[`lintje-button--${n}`]: !0,
+			"lintje-menu-button__trigger": !0,
+			"lintje-menu-button__trigger--split": !0,
+			"is-open": this.open,
+			"is-disabled": this.disabled,
+			"is-working": t
+		})}
+        aria-label=${this.accessibleLabel || `Meer bij ${this.label}`}
+        aria-haspopup="menu"
+        aria-expanded=${String(this.open)}
+        aria-controls=${this.menuId}
+        aria-disabled=${e}
+        @click=${this.onTriggerClick}
+        @keydown=${this.onTriggerKeydown}
+      >
+        ${l("functioneel-delta-omlaag", {
+			size: 20,
+			rotate: this.open ? 180 : void 0,
+			className: "lintje-button__icon"
+		})}
+      </button>
+    </span>`;
+	}
+	renderTrigger() {
+		if (this.split) return this.renderSplit();
+		let e = {
+			"lintje-menu-button__trigger": !0,
+			"is-open": this.open,
+			"is-disabled": this.unavailable
+		}, t = this.unavailable ? "true" : i;
+		return this.icon ? s`<button
+        type="button"
+        class=${c({
+			...e,
+			"lintje-icon-button": !0,
+			"lintje-icon-button--outlined": this.variant !== "tertiary",
+			"lintje-icon-button--flat": this.variant === "tertiary",
+			"lintje-menu-button__trigger--icon": !0
+		})}
+        aria-label=${this.label}
+        aria-haspopup="menu"
+        aria-expanded=${String(this.open)}
+        aria-controls=${this.menuId}
+        aria-disabled=${t}
+        @click=${this.onTriggerClick}
+        @keydown=${this.onTriggerKeydown}
+      >
+        ${l("functioneel-meer", { size: 16 })}
+      </button>` : this.variant === "ellipsis" ? s`<button
+        type="button"
+        class=${c({
+			...e,
+			"lintje-menu-button__trigger--ellipsis": !0
+		})}
+        aria-label=${this.label}
+        aria-haspopup="menu"
+        aria-expanded=${String(this.open)}
+        aria-controls=${this.menuId}
+        aria-disabled=${t}
+        @click=${this.onTriggerClick}
+        @keydown=${this.onTriggerKeydown}
+      >
+        …
+      </button>` : s`<button
+      type="button"
+      class=${c({
+			...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-haspopup="menu"
+      aria-expanded=${String(this.open)}
+      aria-controls=${this.menuId}
+      aria-disabled=${t}
+      @click=${this.onTriggerClick}
+      @keydown=${this.onTriggerKeydown}
+    >
+      ${this.leadingIcon ? l(this.leadingIcon, {
+			size: 16,
+			className: "lintje-button__icon"
+		}) : i}
+      <span class="lintje-button__label">${this.label}</span>
+      ${l("functioneel-delta-omlaag", {
+			size: 16,
+			rotate: this.open ? 180 : void 0,
+			className: "lintje-button__icon"
+		})}
+    </button>`;
+	}
+	renderRow(e) {
+		let t = c({
+			"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({
+			"lintje-menu__icon": !0,
+			"lintje-menu__radio": !0,
+			"is-checked": !!e.checked
+		})}
+      ></span>` : n ? a = e.checked ? l("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, {
+			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
+            class=${t}
+            role="menuitem"
+            tabindex="-1"
+            href=${e.href}
+            @click=${(t) => this.choose(e, t)}
+            >${o}</a
+          >` : s`<button
+            type="button"
+            class=${t}
+            role=${r}
+            tabindex="-1"
+            aria-checked=${n ? String(e.checked) : i}
+            aria-disabled=${e.disabled ? "true" : i}
+            @click=${(t) => this.choose(e, t)}
+          >
+            ${o}
+          </button>`;
+		return e.disabled && e.reason ? s`<lintje-tooltip class="lintje-menu__tip" text=${e.reason}>${u}</lintje-tooltip>` : u;
+	}
+	render() {
+		let e = !!this.busyLabel;
+		return s`${this.renderTrigger()}<lintje-popover
+        id=${this.menuId}
+        panel-role="menu"
+        label=${t(this.accessibleLabel || this.label || void 0)}
+        placement=${this.placement}
+        ?open=${this.open}
+        @lintje-close=${this.onPopoverClose}
+      >
+        <div class="lintje-menu" @keydown=${this.onMenuKeydown}>${g(this.items, this.menuId, (e) => this.renderRow(e))}</div>
+      </lintje-popover
+      ><div
+        class=${c({
+			"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>`;
+	}
+};
+n("lintje-menu-button", y);
+//#endregion
+export { y as LintjeMenuButton, _ as nextRow, g as renderMenuEntries, v as rowByLetter, p as t };

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

@@ -0,0 +1 @@
+export * from '../types/components/overlays/modal/modal.js'

package/dist-elements/tag/modal.js

@@ -0,0 +1,127 @@
+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 { 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 {
+	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();
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			r(l),
+			r(u)
+		];
+	}
+	static {
+		this.properties = {
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			heading: { type: String },
+			subtitle: { type: String },
+			csv: { type: Boolean },
+			png: { type: Boolean },
+			narrow: {
+				type: Boolean,
+				reflect: !0
+			},
+			footerSlotted: { state: !0 },
+			actionsSlotted: { state: !0 }
+		};
+	}
+	onActionsSlotChange(e) {
+		this.actionsSlotted = e.target.assignedElements({ flatten: !0 }).length > 0;
+	}
+	onFooterSlotChange(e) {
+		let t = e.target.assignedNodes({ flatten: !0 });
+		this.footerSlotted = t.some((e) => e.nodeType !== Node.TEXT_NODE || (e.textContent ?? "").trim() !== "");
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	disconnectedCallback() {
+		this.#o(), super.disconnectedCallback();
+	}
+	updated() {
+		this.open && !this.#e ? this.#a() : !this.open && this.#e && this.#o(), this.open && this.#i();
+	}
+	#i() {
+		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));
+	}
+	close() {
+		this.emit("lintje-close");
+	}
+	#a() {
+		this.#e = a(), document.addEventListener("keydown", this.#r);
+		let e = this.renderRoot.querySelector(".lintje-modal");
+		e && this.#t.activate(e);
+	}
+	#o() {
+		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()}>
+      <div
+        class="lintje-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.heading}
+        tabindex="-1"
+        @click=${(e) => e.stopPropagation()}
+      >
+        <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}
+          </div>
+          <button
+            type="button"
+            class="lintje-dialog-close lintje-modal__close"
+            aria-label="Sluiten"
+            @click=${() => this.close()}
+          >
+            ${o("functioneel-kruis", { size: 16 })}
+          </button>
+        </header>
+
+        <div class="lintje-modal__body"><slot></slot></div>
+
+        <footer
+          class="lintje-modal__footer"
+          ?hidden=${!this.csv && !this.png && !this.footerSlotted && !this.actionsSlotted}
+        >
+          <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
+                      variant="tertiary"
+                      size="compact"
+                      icon="functioneel-downloaden"
+                      @click=${() => this.emit("lintje-download-csv")}
+                      >CSV</lintje-button
+                    >` : n}
+                ${this.png ? i`<lintje-button
+                      variant="tertiary"
+                      size="compact"
+                      icon="functioneel-downloaden"
+                      @click=${() => this.emit("lintje-download-png")}
+                      >PNG</lintje-button
+                    >` : n}` : n}
+          </div>
+        </footer>
+      </div>
+    </div>` : n;
+	}
+};
+t("lintje-modal", d);
+//#endregion
+export { d as LintjeModal };

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

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