lintje 0.5.1 → 0.7.0

package/dist-elements/map.js

@@ -1 +1 @@
-import "./tag/map.js";
+import"./tag/map.js";

package/dist-elements/overlays.js

@@ -1,5 +1 @@
-import "./chunks/base-Bd2pmq86.js";
-import "./tag/modal.js";
-import "./tag/dialog.js";
-import "./tag/drawer.js";
-import "./tag/toggletip.js";
+import"./chunks/base-BsZyWDre.js";import"./tag/modal.js";import"./tag/dialog.js";import"./tag/drawer.js";import"./tag/toggletip.js";

package/dist-elements/tables.js

@@ -1,9 +1 @@
-import "./tag/description-list.js";
-import "./tag/list.js";
-import "./tag/pagination.js";
-import "./tag/sortable-list.js";
-import "./tag/data-table.js";
-import "./tag/card.js";
-import "./tag/card-list.js";
-import "./tag/tree-view.js";
-import "./tag/activity-log.js";
+import"./tag/description-list.js";import"./tag/list.js";import"./tag/pagination.js";import"./tag/sortable-list.js";import"./tag/data-table.js";import"./tag/card.js";import"./tag/card-list.js";import"./tag/tree-view.js";import"./tag/activity-log.js";

package/dist-elements/tag/activity-log.js

@@ -1,44 +1,5 @@
-import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-Bd2pmq86.js";
-//#region src/components/tables/activity-log/activity-log.css?inline
-var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-activity-log {\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n.lintje-activity-log__heading {\n  margin: 0 0 var(--space-3);\n  font: var(--text-tile-title);\n}\n.lintje-activity-log__list { list-style: none; margin: 0; padding: 0; }\n\n.lintje-activity-log__entry { display: flex; gap: var(--space-3); }\n.lintje-activity-log__rail {\n  flex: 0 0 10px;\n  display: flex; flex-direction: column; align-items: center;\n}\n/* The square sits on the sentence's first line; this stub joins it to the square above. */\n.lintje-activity-log__rail::before {\n  content: '';\n  flex: 0 0 6px;\n  width: 2px;\n  background: var(--color-border-default);\n}\n.lintje-activity-log__entry.is-newest .lintje-activity-log__rail::before { visibility: hidden; }\n.lintje-activity-log__mark {\n  flex: none;\n  width: 10px; height: 10px;\n  background: var(--color-border-heavy);\n}\n.lintje-activity-log__entry.is-newest .lintje-activity-log__mark { background: var(--color-accent-line); }\n.lintje-activity-log__line {\n  flex: 1 1 auto;\n  width: 2px;\n  background: var(--color-border-default);\n}\n.lintje-activity-log__entry.is-last .lintje-activity-log__line { visibility: hidden; }\n\n.lintje-activity-log__body { min-width: 0; padding-bottom: var(--space-4); }\n.lintje-activity-log__entry.is-last .lintje-activity-log__body { padding-bottom: 0; }\n.lintje-activity-log__what { margin: 0; }\n.lintje-activity-log__who { font-weight: 700; }\n.lintje-activity-log__when {\n  display: block;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n.lintje-activity-log__more { margin-top: var(--space-3); }\n\n/* Forced colours drop fills, so the rail is drawn in the text colour. */\n@media (forced-colors: active) {\n  .lintje-activity-log__rail::before,\n  .lintje-activity-log__mark,\n  .lintje-activity-log__line { forced-color-adjust: none; background: CanvasText; }\n  .lintje-activity-log__entry.is-newest .lintje-activity-log__mark { background: Highlight; }\n}\n", s = 10, c = class extends e {
-	constructor(...e) {
-		super(...e), this.entries = [], this.level = 3, this.limit = s;
-	}
-	static {
-		this.styles = n(o);
-	}
-	static {
-		this.properties = {
-			entries: { attribute: !1 },
-			heading: { type: String },
-			level: { type: Number },
-			limit: { type: Number }
-		};
-	}
-	async showMore() {
-		let e = this.limit;
-		if (this.limit += s, await this.updateComplete, this.renderRoot.querySelector(".lintje-activity-log__more")) return;
-		let t = this.renderRoot.querySelectorAll(".lintje-activity-log__entry")[e];
-		t && (t.tabIndex = -1, t.focus());
-	}
-	renderHeading() {
-		if (!this.heading) return r;
-		let e = this.heading, t = "lintje-activity-log-heading";
-		switch (this.level) {
-			case 2: return i`<h2 id=${t} class="lintje-activity-log__heading">${e}</h2>`;
-			case 4: return i`<h4 id=${t} class="lintje-activity-log__heading">${e}</h4>`;
-			case 5: return i`<h5 id=${t} class="lintje-activity-log__heading">${e}</h5>`;
-			case 6: return i`<h6 id=${t} class="lintje-activity-log__heading">${e}</h6>`;
-			default: return i`<h3 id=${t} class="lintje-activity-log__heading">${e}</h3>`;
-		}
-	}
-	entry(e, t, n) {
-		return i`<li
-      class=${a({
-			"lintje-activity-log__entry": !0,
-			"is-newest": t === 0,
-			"is-last": n
-		})}
+import{cn as e,en as t,on as n,pt as r,rn as i,tn as a}from"../chunks/base-BsZyWDre.js";var o=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-activity-log{font:var(--text-ui);color:var(--color-text-primary)}.lintje-activity-log__heading{margin:0 0 var(--space-3);font:var(--text-tile-title)}.lintje-activity-log__list{margin:0;padding:0;list-style:none}.lintje-activity-log__entry{gap:var(--space-3);display:flex}.lintje-activity-log__rail{flex-direction:column;flex:0 0 10px;align-items:center;display:flex}.lintje-activity-log__rail:before{content:"";background:var(--color-border-default);flex:0 0 6px;width:2px}.lintje-activity-log__entry.is-newest .lintje-activity-log__rail:before{visibility:hidden}.lintje-activity-log__mark{background:var(--color-border-heavy);flex:none;width:10px;height:10px}.lintje-activity-log__entry.is-newest .lintje-activity-log__mark{background:var(--color-accent-line)}.lintje-activity-log__line{background:var(--color-border-default);flex:auto;width:2px}.lintje-activity-log__entry.is-last .lintje-activity-log__line{visibility:hidden}.lintje-activity-log__body{min-width:0;padding-bottom:var(--space-4)}.lintje-activity-log__entry.is-last .lintje-activity-log__body{padding-bottom:0}.lintje-activity-log__what{margin:0}.lintje-activity-log__who{font-weight:700}.lintje-activity-log__when{font:var(--text-small);color:var(--color-text-muted);display:block}.lintje-activity-log__more{margin-top:var(--space-3)}@media (forced-colors:active){.lintje-activity-log__rail:before,.lintje-activity-log__mark,.lintje-activity-log__line{forced-color-adjust:none;background:canvastext}.lintje-activity-log__entry.is-newest .lintje-activity-log__mark{background:highlight}}`,s=10,c=class extends t{constructor(...e){super(...e),this.entries=[],this.level=3,this.limit=s}static{this.styles=i(o)}static{this.properties={entries:{attribute:!1},heading:{type:String},level:{type:Number},limit:{type:Number}}}async showMore(){let e=this.limit;if(this.limit+=s,await this.updateComplete,this.renderRoot.querySelector(`.lintje-activity-log__more`))return;let t=this.renderRoot.querySelectorAll(`.lintje-activity-log__entry`)[e];t&&(t.tabIndex=-1,t.focus())}renderHeading(){if(!this.heading)return n;let t=this.heading,r=`lintje-activity-log-heading`;switch(this.level){case 2:return e`<h2 id=${r} class="lintje-activity-log__heading">${t}</h2>`;case 4:return e`<h4 id=${r} class="lintje-activity-log__heading">${t}</h4>`;case 5:return e`<h5 id=${r} class="lintje-activity-log__heading">${t}</h5>`;case 6:return e`<h6 id=${r} class="lintje-activity-log__heading">${t}</h6>`;default:return e`<h3 id=${r} class="lintje-activity-log__heading">${t}</h3>`}}entry(t,n,i){return e`<li
+      class=${r({"lintje-activity-log__entry":!0,"is-newest":n===0,"is-last":i})}
     >
       <span class="lintje-activity-log__rail" aria-hidden="true">
         <span class="lintje-activity-log__mark"></span>
@@ -46,31 +7,22 @@ var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
       </span>
       <div class="lintje-activity-log__body">
         <p class="lintje-activity-log__what">
-          <strong class="lintje-activity-log__who">${e.who}</strong> ${e.what}
+          <strong class="lintje-activity-log__who">${t.who}</strong> ${t.what}
         </p>
-        ${e.at ? i`<time class="lintje-activity-log__when" datetime=${e.at}>${e.when}</time>` : i`<span class="lintje-activity-log__when">${e.when}</span>`}
+        ${t.at?e`<time class="lintje-activity-log__when" datetime=${t.at}>${t.when}</time>`:e`<span class="lintje-activity-log__when">${t.when}</span>`}
       </div>
-    </li>`;
-	}
-	render() {
-		let e = this.entries.slice(0, Math.max(0, this.limit)), t = this.entries.length - e.length;
-		return i`<section class="lintje-activity-log">
+    </li>`}render(){let t=this.entries.slice(0,Math.max(0,this.limit)),r=this.entries.length-t.length;return e`<section class="lintje-activity-log">
       ${this.renderHeading()}
       <ol
         class="lintje-activity-log__list"
-        aria-labelledby=${this.heading ? "lintje-activity-log-heading" : r}
+        aria-labelledby=${this.heading?`lintje-activity-log-heading`:n}
       >
-        ${e.map((t, n) => this.entry(t, n, n === e.length - 1))}
+        ${t.map((e,n)=>this.entry(e,n,n===t.length-1))}
       </ol>
-      ${t > 0 ? i`<lintje-button
+      ${r>0?e`<lintje-button
               class="lintje-activity-log__more"
               variant="link"
-              @click=${() => void this.showMore()}
+              @click=${()=>void this.showMore()}
               >Toon eerdere</lintje-button
-            >` : r}
-    </section>`;
-	}
-};
-t("lintje-activity-log", c);
-//#endregion
-export { c as LintjeActivityLog };
+            >`:n}
+    </section>`}};a(`lintje-activity-log`,c);export{c as LintjeActivityLog};

package/dist-elements/tag/ai-label.js

@@ -1,38 +1,5 @@
-import { Jt as e, Yt as t, Zt as n, at as r, en as i, lt as a, nn as o, ot as s, ut as c } from "../chunks/base-Bd2pmq86.js";
-//#region src/components/feedback/ai-label/ai-label.css?inline
-var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-ai-label {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n/* Unlike other badges this one may wrap: a long name would run past a 390 px screen. */\n.lintje-ai-label__box {\n  max-width: 100%;\n  height: auto;\n  min-height: 1.5rem;\n  line-height: 1.25;\n  white-space: normal;\n}\n.lintje-ai-label__badge { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }\n.lintje-ai-label__icon { flex: none; }\n.lintje-ai-label__hint { font: var(--text-small); color: var(--color-text-muted); }\n", u = "Controleer de tekst voor je hem gebruikt", d = class extends e {
-	static {
-		this.styles = [
-			a,
-			r,
-			n(l)
-		];
-	}
-	static {
-		this.properties = {
-			checkedBy: {
-				type: String,
-				attribute: "checked-by"
-			},
-			hint: { type: String }
-		};
-	}
-	render() {
-		let e = !!this.checkedBy, t = this.hint ?? (e ? "" : u), n = o`<span class="lintje-ai-label__badge"
-      >${c(e ? "functioneel-vinkje" : "gereedschap-half-tandwiel-half-brein", {
-			size: 14,
-			className: "lintje-ai-label__icon"
-		})}<span>${e ? `Gecontroleerd door ${this.checkedBy}` : "Gemaakt door AI"}</span></span
-    >`;
-		return o`<span class="lintje-ai-label">
-      ${s({
-			value: n,
-			tone: "neutral",
-			className: "lintje-ai-label__box"
-		})}${t ? o`<span class="lintje-ai-label__hint">${t}</span>` : i}
-    </span>`;
-	}
-};
-t("lintje-ai-label", d);
-//#endregion
-export { d as LintjeAiLabel };
+import{cn as e,dt as t,en as n,ft as r,gt as i,ht as a,on as o,rn as s,tn as c}from"../chunks/base-BsZyWDre.js";var l=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-ai-label{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.lintje-ai-label__box{white-space:normal;max-width:100%;height:auto;min-height:1.5rem;line-height:1.25}.lintje-ai-label__badge{align-items:center;gap:var(--space-1);min-width:0;display:inline-flex}.lintje-ai-label__icon{flex:none}.lintje-ai-label__hint{font:var(--text-small);color:var(--color-text-muted)}`,u=`Controleer de tekst voor je hem gebruikt`,d=class extends n{static{this.styles=[a,t,s(l)]}static{this.properties={checkedBy:{type:String,attribute:`checked-by`},hint:{type:String}}}render(){let t=!!this.checkedBy,n=this.hint??(t?``:u),a=e`<span class="lintje-ai-label__badge"
+      >${i(t?`functioneel-vinkje`:`gereedschap-half-tandwiel-half-brein`,{size:14,className:`lintje-ai-label__icon`})}<span>${t?`Gecontroleerd door ${this.checkedBy}`:`Gemaakt door AI`}</span></span
+    >`;return e`<span class="lintje-ai-label">
+      ${r({value:a,tone:`neutral`,className:`lintje-ai-label__box`})}${n?e`<span class="lintje-ai-label__hint">${n}</span>`:o}
+    </span>`}};c(`lintje-ai-label`,d);export{d as LintjeAiLabel};

package/dist-elements/tag/announcement.js

@@ -1,106 +1,10 @@
-import { F as e, M as t, N as n, P as r, Q as i, Yt as a, Z as o, Zt as s, en as c, lt as l, nn as u } from "../chunks/base-Bd2pmq86.js";
-import { r as d } from "../chunks/focus-trap-Cl99vti9.js";
-//#region src/components/shared/view-tile.css?inline
-var f = "/*\n * A view element around a tile: the tile fills the host, so the footnote\n * (`margin-top: auto`) reaches the bottom of the grid cell.\n * `display: block` because a standalone custom element is inline.\n */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) {\n  display: none;\n}\n/* The grid cell moves to the next sheet whole; a tile split between its title and its drawing\n   reads as two. */\n@media print {\n  :host { break-inside: avoid; }\n}\n/* `min-height: inherit`: a held host has a min-height and no height, so `100%` resolves to auto. */\nlintje-tile {\n  height: 100%;\n  min-height: inherit;\n}\n", p = (e) => `lintje-announcement-dismissed:${e}`, m = class extends r {
-	constructor(...e) {
-		super(...e), this.dismissed = null, this.filled = null, this.fillFrame = 0;
-	}
-	static {
-		this.styles = [
-			l,
-			e,
-			s(f),
-			t
-		];
-	}
-	static {
-		this.properties = {
-			data: { attribute: !1 },
-			dismissed: { state: !0 },
-			filled: { state: !0 }
-		};
-	}
-	get dataSettings() {
-		return this.data ?? void 0;
-	}
-	get identity() {
-		let e = this.data;
-		return e ? e.announcementId ?? [
-			e.kind,
-			e.title,
-			e.text
-		].join("\0") : "";
-	}
-	get isDismissed() {
-		let e = this.data;
-		if (!e) return !1;
-		if (this.dismissed === this.identity) return !0;
-		if (!e.announcementId) return !1;
-		try {
-			return localStorage.getItem(p(e.announcementId)) === "1";
-		} catch {
-			return !1;
-		}
-	}
-	holds(e) {
-		for (let t = e; t;) {
-			if (t === this) return !0;
-			t = t.parentNode ?? (t instanceof ShadowRoot ? t.host : null);
-		}
-		return !1;
-	}
-	neighbour() {
-		let e = d(document.body), t = e.indexOf(o());
-		if (t === -1) return null;
-		let n = (e) => !this.holds(e);
-		return e.slice(t + 1).find(n) ?? e.slice(0, t).reverse().find(n) ?? null;
-	}
-	async close() {
-		let e = i(this) ? this.neighbour() : null, t = this.data?.announcementId;
-		if (t) try {
-			localStorage.setItem(p(t), "1");
-		} catch {}
-		this.dismissed = this.identity, e && (await this.updateComplete, e.focus());
-	}
-	disconnectedCallback() {
-		this.fillFrame && cancelAnimationFrame(this.fillFrame), this.fillFrame = 0, super.disconnectedCallback();
-	}
-	updated(e) {
-		super.updated(e), !(!this.data?.live || this.isDismissed || this.filled === this.identity || this.fillFrame) && (this.fillFrame = requestAnimationFrame(() => {
-			this.fillFrame = 0, this.filled = this.identity;
-		}));
-	}
-	render() {
-		let e = this.data;
-		if (!e || this.isDismissed) return c;
-		let t = this.block(e), n = e.tile;
-		return n ? u`<lintje-tile
-      id=${this.id ? `${this.id}-tile` : c}
-      span=${n.span ?? c}
-      heading=${n.title ?? c}
-      icon=${n.icon ?? c}
-      subtitle=${n.subtitle ?? c}
-      intro=${n.intro ?? c}
-      footnote=${n.footnote ?? c}
+import{F as e,M as t,N as n,P as r,cn as i,ht as a,nt as o,on as s,rn as c,rt as l,tn as u}from"../chunks/base-BsZyWDre.js";import{i as d}from"../chunks/focus-trap-BDxiHED1.js";var f=`:host{min-width:0;display:block}:host([hidden]){display:none}@media print{:host{break-inside:avoid}}lintje-tile{height:100%;min-height:inherit}`,p=e=>`lintje-announcement-dismissed:${e}`,m=class extends r{constructor(...e){super(...e),this.dismissed=null,this.filled=null,this.fillFrame=0}static{this.styles=[a,e,c(f),t]}static{this.properties={data:{attribute:!1},dismissed:{state:!0},filled:{state:!0}}}get dataSettings(){return this.data??void 0}get identity(){let e=this.data;return e?e.announcementId??[e.kind,e.title,e.text].join(`\0`):``}get isDismissed(){let e=this.data;if(!e)return!1;if(this.dismissed===this.identity)return!0;if(!e.announcementId)return!1;try{return localStorage.getItem(p(e.announcementId))===`1`}catch{return!1}}holds(e){for(let t=e;t;){if(t===this)return!0;t=t.parentNode??(t instanceof ShadowRoot?t.host:null)}return!1}neighbour(){let e=d(document.body),t=e.indexOf(o());if(t===-1)return null;let n=e=>!this.holds(e);return e.slice(t+1).find(n)??e.slice(0,t).reverse().find(n)??null}async close(){let e=l(this)?this.neighbour():null,t=this.data?.announcementId;if(t)try{localStorage.setItem(p(t),`1`)}catch{}this.dismissed=this.identity,e&&(await this.updateComplete,e.focus())}disconnectedCallback(){this.fillFrame&&cancelAnimationFrame(this.fillFrame),this.fillFrame=0,super.disconnectedCallback()}updated(e){super.updated(e),!(!this.data?.live||this.isDismissed||this.filled===this.identity||this.fillFrame)&&(this.fillFrame=requestAnimationFrame(()=>{this.fillFrame=0,this.filled=this.identity}))}render(){let e=this.data;if(!e||this.isDismissed)return s;let t=this.block(e),n=e.tile;return n?i`<lintje-tile
+      id=${this.id?`${this.id}-tile`:s}
+      span=${n.span??s}
+      heading=${n.title??s}
+      icon=${n.icon??s}
+      subtitle=${n.subtitle??s}
+      intro=${n.intro??s}
+      footnote=${n.footnote??s}
       >${t}</lintje-tile
-    >` : t;
-	}
-	block(e) {
-		let t = e.kind ?? "warning", r = !!e.dismissible && t !== "outage", i = e.live === !0;
-		return n({
-			kind: t,
-			title: e.title,
-			text: e.text,
-			meta: e.meta,
-			link: e.link,
-			live: i,
-			filled: this.filled === this.identity,
-			action: u`<slot name="action" class="lintje-announcement__action"></slot>`,
-			media: u`<slot name="media" class="lintje-announcement__media"></slot>`,
-			onClose: r ? () => void this.close() : void 0
-		});
-	}
-};
-a("lintje-announcement", m);
-//#endregion
-export { m as LintjeAnnouncement, f as t };
+    >`:t}block(e){let t=e.kind??`warning`,r=!!e.dismissible&&t!==`outage`,a=e.live===!0;return n({kind:t,title:e.title,text:e.text,meta:e.meta,link:e.link,live:a,filled:this.filled===this.identity,action:i`<slot name="action" class="lintje-announcement__action"></slot>`,media:i`<slot name="media" class="lintje-announcement__media"></slot>`,onClose:r?()=>void this.close():void 0})}};u(`lintje-announcement`,m);export{m as LintjeAnnouncement,f as t};

package/dist-elements/tag/app-search.js

@@ -1,204 +1,58 @@
-import { Gt as e, H as t, Ht as n, Jt as r, Kt as i, Yt as a, Zt as o, en as s, jt as c, lt as l, nn as u, st as d, ut as f } from "../chunks/base-Bd2pmq86.js";
-import { t as p } from "../chunks/focus-trap-Cl99vti9.js";
-import { t as m } from "../chunks/dialog-close-u75fVEw4.js";
-import { t as h } from "../chunks/key-D5wy9ZTj.js";
-import { t as g } from "../chunks/debounce-JXnLMCcF.js";
-//#region src/components/frame/app-search/app-search.css?inline
-var _ = ":host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-app-search__scrim {\n  position: fixed;\n  z-index: 80;\n  inset: 0;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: calc(var(--space-10) * 2) var(--space-6) var(--space-6);\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n.lintje-app-search {\n  display: flex;\n  flex-direction: column;\n  width: min(560px, 100%);\n  max-height: 100%;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-strong);\n  box-shadow: var(--shadow-popover);\n  font: var(--text-ui);\n  animation: lintje-rise var(--dur-modal) var(--ease-in-motion);\n}\n/* The window takes focus only when the trap pulls stray focus back; the field draws the ring. */\n.lintje-app-search:focus { outline: none; }\n\n.lintje-app-search__field {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex: none;\n  padding: var(--space-3);\n  background: var(--color-bg-filter);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-app-search__icon {\n  position: absolute;\n  left: calc(var(--space-3) * 2);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n/* A field like every other, so its focus ring has room inside the band. */\n.lintje-app-search__input {\n  flex: 1;\n  min-width: 0;\n  height: var(--h-control);\n  /* Clears the glyph. */\n  padding: 0 var(--space-3) 0 calc(var(--space-3) + 20px + var(--space-3));\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  font-size: 1rem;\n}\n.lintje-app-search__input::-webkit-search-cancel-button { display: none; }\n\n.lintje-app-search__results {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  padding: var(--space-3) 0 var(--space-2);\n}\n\n.lintje-app-search__heading {\n  padding: var(--space-3) var(--space-4) var(--space-2);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-app-search__group:first-child .lintje-app-search__heading { padding-top: 0; }\n\n.lintje-app-search__option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-height: var(--h-control);\n  padding: 0 var(--space-4);\n  color: var(--color-text-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-app-search__option + .lintje-app-search__option { border-top: 1px solid var(--color-border-default); }\n.lintje-app-search__option:hover { background: var(--color-bg-subtle); }\n/* The chosen row has the virtual focus (`aria-activedescendant`), so it draws the focus ring,\n   inside; the fill alone is too faint to find. */\n.lintje-app-search__option.is-active {\n  background: var(--color-bg-selected);\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n.lintje-app-search__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lintje-app-search__match { font-weight: 700; }\n.lintje-app-search__meta { flex: none; color: var(--color-text-muted); }\n\n.lintje-app-search__busy { display: flex; align-items: center; justify-content: center; padding: var(--space-4); color: var(--color-text-muted); }\n.lintje-app-search__empty { margin: 0; padding: var(--space-4); text-align: center; color: var(--color-text-muted); }\n\n.lintje-app-search__keys {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  flex: none;\n  gap: var(--space-1) var(--space-6);\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-default);\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n}\n.lintje-app-search__hint { display: inline-flex; align-items: center; gap: var(--space-1); }\n\n.lintje-app-search__close:hover { color: var(--color-text-primary); }\n\n/* Phone: a sheet from below, as \"Weergave\", \"Delen\" and the filters open, with their head. Its\n   height stays as the results change, and the field stands high, above the keyboard. */\n.lintje-app-search__header {\n  display: flex; align-items: center; gap: var(--space-2);\n  flex: none;\n  padding: var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-app-search__title { flex: 1; margin: 0; font: var(--text-h2); }\n\n@media screen and (max-width: 767px) {\n  .lintje-app-search__scrim { align-items: flex-end; padding: 0; }\n  .lintje-app-search {\n    width: 100%;\n    height: 88vh;\n    border: 0;\n    border-top: 1px solid var(--color-border-strong);\n    box-shadow: none;\n    animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n  }\n  .lintje-app-search__input { height: var(--h-touch); }\n  .lintje-app-search__option { min-height: var(--h-touch); }\n}\n\n/* Forced colours drop the fill; the ring takes Highlight. */\n@media (forced-colors: active) {\n  .lintje-app-search__option.is-active { outline: 2px solid Highlight; outline-offset: -2px; }\n}\n", v = 200, y = 0;
-function b(e, t) {
-	let n = t.trim();
-	if (!n) return null;
-	let r = e.toLocaleLowerCase("nl").indexOf(n.toLocaleLowerCase("nl"));
-	return r < 0 ? null : [
-		e.slice(0, r),
-		e.slice(r, r + n.length),
-		e.slice(r + n.length)
-	];
-}
-function x(e, t, n) {
-	return n ? "" : e === 0 ? t.trim() ? `Geen resultaten voor “${t.trim()}”` : "" : e === 1 ? "1 resultaat" : `${e} resultaten`;
-}
-var S = class extends r {
-	constructor(...t) {
-		super(...t), this.open = !1, this.label = "Zoeken", this.query = "", this.loading = !1, this.groups = [], this.active = -1, this.#e = new i(this, e), this.#t = new g(this, 200), this.#n = `lintje-app-search-${++y}`, this.#r = null, this.#i = null, this.#a = new p(), this.#o = (e) => {
-			e.key === "Escape" && this.#a.isTopmost() && this.close("escape");
-		};
-	}
-	static {
-		this.styles = [
-			l,
-			o(m),
-			o(h),
-			o(_)
-		];
-	}
-	static {
-		this.properties = {
-			open: {
-				type: Boolean,
-				reflect: !0
-			},
-			label: { type: String },
-			query: { type: String },
-			loading: {
-				type: Boolean,
-				reflect: !0
-			},
-			groups: { attribute: !1 },
-			active: { state: !0 }
-		};
-	}
-	#e;
-	#t;
-	#n;
-	#r;
-	#i;
-	#a;
-	get results() {
-		return this.groups.flatMap((e) => e.items);
-	}
-	get input() {
-		return this.renderRoot.querySelector(".lintje-app-search__input");
-	}
-	optionId(e) {
-		return `${this.#n}-option-${e}`;
-	}
-	#o;
-	connectedCallback() {
-		super.connectedCallback(), this.#r = c({
-			keys: "/",
-			description: "Zoeken",
-			handler: () => {
-				this.open || this.emit("lintje-open");
-			}
-		});
-	}
-	disconnectedCallback() {
-		this.#r?.(), this.#r = null, this.#c(), super.disconnectedCallback();
-	}
-	close(e) {
-		this.emit("lintje-close", { reason: e });
-	}
-	willUpdate(e) {
-		super.willUpdate(e), (e.has("groups") || e.has("loading")) && (this.active = !this.loading && this.results.length ? 0 : -1);
-	}
-	updated(e) {
-		super.updated(e), this.open && !this.#i ? this.#s() : !this.open && this.#i && this.#c(), e.has("active") && this.active >= 0 && this.renderRoot.querySelector(`#${this.optionId(this.active)}`)?.scrollIntoView?.({ block: "nearest" });
-	}
-	#s() {
-		this.#i = n(), document.addEventListener("keydown", this.#o);
-		let e = this.renderRoot.querySelector(".lintje-app-search");
-		e && this.#a.activate(e, { focus: this.input ?? !0 });
-	}
-	#c() {
-		this.#i && (this.#t.cancel(), document.removeEventListener("keydown", this.#o), this.#i(), this.#i = null, this.#a.deactivate());
-	}
-	onInput(e) {
-		this.query = e.target.value, this.#t.schedule(() => this.emit("lintje-search", this.query));
-	}
-	onFieldKeydown(e) {
-		let t = this.results.length;
-		switch (e.key) {
-			case "ArrowDown":
-				e.preventDefault(), t && (this.active = (this.active + 1) % t);
-				return;
-			case "ArrowUp":
-				e.preventDefault(), t && (this.active = (this.active - 1 + t) % t);
-				return;
-			case "Enter": {
-				e.preventDefault();
-				let t = this.results[this.active];
-				t && !this.loading ? this.choose(t) : this.#t.flush();
-			}
-		}
-	}
-	choose(e, n) {
-		if (e.href) {
-			if (n && !t(n)) return;
-			this.followLink(e.href, n);
-		} else this.emit("lintje-action", e.id);
-		this.close("choice");
-	}
-	renderLabel(e) {
-		let t = b(e, this.query);
-		return t ? u`${t[0]}<strong class="lintje-app-search__match">${t[1]}</strong>${t[2]}` : u`${e}`;
-	}
-	renderOption(e, t) {
-		let n = t === this.active, r = d({
-			"lintje-app-search__option": !0,
-			"is-active": n
-		}), i = u`<span class="lintje-app-search__label">${this.renderLabel(e.label)}</span>${e.meta ? u`<span class="lintje-app-search__meta">${e.meta}</span>` : s}`, a = (t) => this.choose(e, t);
-		return e.href ? u`<a
+import{Lt as e,Qt as t,U as n,Zt as r,cn as i,en as a,gt as o,ht as s,on as c,pt as l,rn as u,st as d,tn as f}from"../chunks/base-BsZyWDre.js";import{n as p,t as m}from"../chunks/dialog-close-CzMRXkJ6.js";import{t as h}from"../chunks/debounce-Dfwdcv-z.js";import{t as g}from"../chunks/key-CAxrgBxD.js";var _=`:host{display:contents}.lintje-app-search__scrim{z-index:80;padding:calc(var(--space-10) * 2) var(--space-6) var(--space-6);background:var(--color-overlay-page);animation:lintje-fade-in var(--dur-scrim) var(--ease-in-motion);justify-content:center;align-items:flex-start;display:flex;position:fixed;inset:0}.lintje-app-search{background:var(--color-bg-surface);width:min(560px,100%);max-height:100%;color:var(--color-text-primary);border:1px solid var(--color-border-strong);box-shadow:var(--shadow-popover);font:var(--text-ui);animation:lintje-rise var(--dur-modal) var(--ease-in-motion);flex-direction:column;display:flex}.lintje-app-search:focus{outline:none}.lintje-app-search__field{padding:var(--space-3);background:var(--color-bg-filter);border-bottom:1px solid var(--color-border-default);flex:none;align-items:center;display:flex;position:relative}.lintje-app-search__icon{left:calc(var(--space-3) * 2);color:var(--color-text-muted);pointer-events:none;position:absolute}.lintje-app-search__input{min-width:0;height:var(--h-control);padding:0 var(--space-3) 0 calc(var(--space-3) + 20px + var(--space-3));border:1px solid var(--color-border-field);background:var(--color-bg-surface);flex:1;font-size:1rem}.lintje-app-search__input::-webkit-search-cancel-button{display:none}.lintje-app-search__results{min-height:0;padding:var(--space-3) 0 var(--space-2);flex:auto;overflow-y:auto}.lintje-app-search__heading{padding:var(--space-3) var(--space-4) var(--space-2);font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--color-text-muted)}.lintje-app-search__group:first-child .lintje-app-search__heading{padding-top:0}.lintje-app-search__option{justify-content:space-between;align-items:center;gap:var(--space-4);min-height:var(--h-control);padding:var(--space-2) var(--space-4);color:var(--color-text-primary);cursor:pointer;transition:background var(--dur-hover) var(--ease-in-motion);text-decoration:none;display:flex}.lintje-app-search__option+.lintje-app-search__option{border-top:1px solid var(--color-border-default)}.lintje-app-search__option:hover{background:var(--color-bg-subtle)}.lintje-app-search__option.is-active{background:var(--color-bg-selected);outline:var(--focus-width) solid var(--color-focus);outline-offset:calc(var(--focus-width) * -1)}.lintje-app-search__label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.lintje-app-search__option.is-active .lintje-app-search__label{white-space:normal;overflow-wrap:anywhere}@media (hover:none),screen and (width<=767px){.lintje-app-search__label{white-space:normal;overflow-wrap:anywhere}}.lintje-app-search__match{font-weight:700}.lintje-app-search__meta{color:var(--color-text-muted);flex:none}.lintje-app-search__busy{padding:var(--space-4);color:var(--color-text-muted);justify-content:center;align-items:center;display:flex}.lintje-app-search__empty{padding:var(--space-4);text-align:center;color:var(--color-text-muted);margin:0}.lintje-app-search__keys{align-items:center;gap:var(--space-1) var(--space-6);padding:var(--space-3) var(--space-4);background:var(--color-bg-filter);border-top:1px solid var(--color-border-default);color:var(--color-text-muted);flex-wrap:wrap;flex:none;margin:0;font-size:.875rem;display:flex}.lintje-app-search__hint{align-items:center;gap:var(--space-1);display:inline-flex}.lintje-app-search__close:hover{color:var(--color-text-primary)}.lintje-app-search__header{align-items:center;gap:var(--space-2);padding:var(--space-4);border-bottom:1px solid var(--color-border-default);flex:none;display:flex}.lintje-app-search__title{font:var(--text-h2);flex:1;margin:0}@media screen and (width<=767px){.lintje-app-search__scrim{align-items:flex-end;padding:0}.lintje-app-search{border:0;border-top:1px solid var(--color-border-strong);width:100%;height:88vh;box-shadow:none;animation:lintje-sheet-in var(--dur-sheet) var(--ease-in-motion)}.lintje-app-search__input{height:var(--h-touch)}.lintje-app-search__option{min-height:var(--h-touch)}}@media (forced-colors:active){.lintje-app-search__option.is-active{outline-offset:-2px;outline:2px solid highlight}}`,v=200,y=0,b=[],x=null;function S(e,t){let n=t.trim();if(!n)return null;let r=e.toLocaleLowerCase(`nl`).indexOf(n.toLocaleLowerCase(`nl`));return r<0?null:[e.slice(0,r),e.slice(r,r+n.length),e.slice(r+n.length)]}function C(e,t,n){return n?``:e===0?t.trim()?`Geen resultaten voor “${t.trim()}”`:``:e===1?`1 resultaat`:`${e} resultaten`}var w=class extends a{constructor(...e){super(...e),this.open=!1,this.label=`Zoeken`,this.query=``,this.loading=!1,this.groups=[],this.active=-1,this.#e=new t(this,r),this.#t=new h(this,200),this.#n=`lintje-app-search-${++y}`,this.#r=new p(()=>this.close(`escape`))}static{this.styles=[s,u(m),u(g),u(_)]}static{this.properties={open:{type:Boolean,reflect:!0},label:{type:String},query:{type:String},loading:{type:Boolean,reflect:!0},groups:{attribute:!1},active:{state:!0}}}#e;#t;#n;#r;get results(){return this.groups.flatMap(e=>e.items)}get input(){return this.renderRoot.querySelector(`.lintje-app-search__input`)}optionId(e){return`${this.#n}-option-${e}`}connectedCallback(){super.connectedCallback(),b.push(this),x??=e({keys:`/`,description:`Zoeken`,handler:()=>b.at(-1)?.askOpen()})}disconnectedCallback(){let e=b.indexOf(this);e!==-1&&b.splice(e,1),b.length||(x?.(),x=null),this.#a(),super.disconnectedCallback()}askOpen(){this.open||this.emit(`lintje-open`)}close(e){this.emit(`lintje-close`,{reason:e})}willUpdate(e){super.willUpdate(e),(e.has(`groups`)||e.has(`loading`))&&(this.active=!this.loading&&this.results.length?0:-1)}updated(e){super.updated(e),this.open&&!this.#r.held?this.#i():!this.open&&this.#r.held&&this.#a(),e.has(`active`)&&this.active>=0&&this.renderRoot.querySelector(`#${this.optionId(this.active)}`)?.scrollIntoView?.({block:`nearest`})}#i(){let e=this.renderRoot.querySelector(`.lintje-app-search`);e&&this.#r.hold(e,{focus:this.input??!0})}#a(){this.#r.held&&(this.#t.cancel(),this.#r.release())}onInput(e){this.query=e.target.value,this.#t.schedule(()=>this.emit(`lintje-search`,this.query))}onFieldKeydown(e){let t=this.results.length;switch(e.key){case`ArrowDown`:e.preventDefault(),t&&(this.active=(this.active+1)%t);return;case`ArrowUp`:e.preventDefault(),t&&(this.active=(this.active-1+t)%t);return;case`Enter`:{e.preventDefault();let t=this.results[this.active];t&&!this.loading?this.choose(t):this.#t.flush()}}}choose(e,t){if(e.href){if(t&&!n(t))return;this.followLink(e.href,t)}else this.emit(`lintje-action`,e.id);this.close(`choice`)}renderLabel(e){let t=S(e,this.query);return t?i`${t[0]}<strong class="lintje-app-search__match">${t[1]}</strong>${t[2]}`:i`${e}`}renderOption(e,t){let n=t===this.active,r=l({"lintje-app-search__option":!0,"is-active":n}),a=i`<span class="lintje-app-search__label" @pointerenter=${d}>${this.renderLabel(e.label)}</span>${e.meta?i`<span class="lintje-app-search__meta">${e.meta}</span>`:c}`,o=t=>this.choose(e,t);return e.href?i`<a
           id=${this.optionId(t)}
           class=${r}
           role="option"
           aria-selected=${String(n)}
           tabindex="-1"
           href=${e.href}
-          @click=${a}
-          >${i}</a
-        >` : u`<div
+          @click=${o}
+          >${a}</a
+        >`:i`<div
           id=${this.optionId(t)}
           class=${r}
           role="option"
           aria-selected=${String(n)}
-          @click=${a}
+          @click=${o}
         >
-          ${i}
-        </div>`;
-	}
-	renderResults() {
-		let e = 0, t = `${this.#n}-list`, n = this.results.length, r = this.query.trim();
-		return u`
-      ${this.loading ? u`<div class="lintje-app-search__busy">
+          ${a}
+        </div>`}renderResults(){let e=0,t=`${this.#n}-list`,n=this.results.length,r=this.query.trim();return i`
+      ${this.loading?i`<div class="lintje-app-search__busy">
             <lintje-spinner label="Zoeken"></lintje-spinner>
-          </div>` : !n && r ? u`<p class="lintje-app-search__empty">Geen resultaten voor “${r}”</p>` : s}
+          </div>`:!n&&r?i`<p class="lintje-app-search__empty">Geen resultaten voor “${r}”</p>`:c}
       <div
         id=${t}
         class="lintje-app-search__list"
         role="listbox"
         aria-label="Resultaten"
-        ?hidden=${this.loading || !n}
+        ?hidden=${this.loading||!n}
       >
-        ${this.groups.map((t, n) => {
-			if (!t.items.length) return s;
-			let r = `${this.#n}-group-${n}`;
-			return u`<div class="lintje-app-search__group" role="group" aria-labelledby=${r}>
+        ${this.groups.map((t,n)=>{if(!t.items.length)return c;let r=`${this.#n}-group-${n}`;return i`<div class="lintje-app-search__group" role="group" aria-labelledby=${r}>
             <div id=${r} class="lintje-app-search__heading">${t.label}</div>
-            ${t.items.map((t) => this.renderOption(t, e++))}
-          </div>`;
-		})}
+            ${t.items.map(t=>this.renderOption(t,e++))}
+          </div>`})}
       </div>
-    `;
-	}
-	render() {
-		if (!this.open) return s;
-		let e = `${this.#n}-list`, t = this.results.length, n = !this.loading && t > 0;
-		return u`<div class="lintje-app-search__scrim" @click=${() => this.close("scrim")}>
+    `}render(){if(!this.open)return c;let e=`${this.#n}-list`,t=this.results.length,n=!this.loading&&t>0;return i`<div class="lintje-app-search__scrim" @click=${()=>this.close(`scrim`)}>
       <div
         class="lintje-app-search"
         role="dialog"
         aria-modal="true"
         aria-label="Zoeken"
         tabindex="-1"
-        @click=${(e) => e.stopPropagation()}
+        @click=${e=>e.stopPropagation()}
       >
-        ${this.#e.matches ? u`<div class="lintje-app-search__header">
+        ${this.#e.matches?i`<div class="lintje-app-search__header">
                 <h2 class="lintje-app-search__title">Zoeken</h2>
                 <button
                   type="button"
                   class="lintje-dialog-close lintje-app-search__close"
                   aria-label="Zoeken sluiten"
-                  @click=${() => this.close("button")}
+                  @click=${()=>this.close(`button`)}
                 >
-                  ${f("functioneel-kruis", { size: 16 })}
+                  ${o(`functioneel-kruis`,{size:16})}
                 </button>
-              </div>` : s}
+              </div>`:c}
         <div class="lintje-app-search__field">
-          ${f("functioneel-zoek", {
-			size: 20,
-			className: "lintje-app-search__icon"
-		})}
+          ${o(`functioneel-zoek`,{size:20,className:`lintje-app-search__icon`})}
           <input
             class="lintje-app-search__input"
             type="search"
@@ -209,7 +63,7 @@ var S = class extends r {
             aria-autocomplete="list"
             aria-expanded=${String(n)}
             aria-controls=${e}
-            aria-activedescendant=${n && this.active >= 0 ? this.optionId(this.active) : s}
+            aria-activedescendant=${n&&this.active>=0?this.optionId(this.active):c}
             .value=${this.query}
             @input=${this.onInput}
             @keydown=${this.onFieldKeydown}
@@ -217,15 +71,15 @@ var S = class extends r {
         </div>
         <div
           class="lintje-app-search__results"
-          ?hidden=${!this.loading && !t && !this.query.trim()}
-          @mousedown=${(e) => e.preventDefault()}
+          ?hidden=${!this.loading&&!t&&!this.query.trim()}
+          @mousedown=${e=>e.preventDefault()}
         >
           ${this.renderResults()}
         </div>
         <p class="visually-hidden" aria-live="polite">
-          ${x(t, this.query, this.loading)}
+          ${C(t,this.query,this.loading)}
         </p>
-        ${this.#e.matches ? s : u`<p class="lintje-app-search__keys">
+        ${this.#e.matches?c:i`<p class="lintje-app-search__keys">
                 <span class="lintje-app-search__hint"
                   ><kbd class="lintje-key">↑</kbd><kbd class="lintje-key">↓</kbd> kiezen</span
                 >
@@ -233,9 +87,4 @@ var S = class extends r {
                 <span class="lintje-app-search__hint"><kbd class="lintje-key">Esc</kbd> sluiten</span>
               </p>`}
       </div>
-    </div>`;
-	}
-};
-a("lintje-app-search", S);
-//#endregion
-export { S as LintjeAppSearch, v as SEARCH_DELAY, x as resultsMessage, b as splitMatch };
+    </div>`}};f(`lintje-app-search`,w);export{w as LintjeAppSearch,v as SEARCH_DELAY,C as resultsMessage,S as splitMatch};