lintje 0.2.0 → 0.3.0

package/dist-elements/tag/multiselect.js

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

package/dist-elements/tag/note.js

@@ -1,8 +1,8 @@
-import { Bt as e, Gt as t, Ht as n, O as r, k as i, qt as a } from "../chunks/base-Bg-IFOPG.js";
+import { F as e, P as t, Yt as n, Zt as r, en as i, nn as a } from "../chunks/base-CbmWxUig.js";
 //#region src/components/charts/note/note.css?inline
-var o = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n.lintje-note { height: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-note {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n  display: flex; flex-direction: column; gap: var(--space-2);\n  min-width: 0;\n}\n.lintje-note__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }\n.lintje-note__title { font: var(--text-tile-title); }\n.lintje-note__date { font: var(--text-tile-sub); color: var(--color-text-muted); }\n.lintje-note__text { font: var(--text-small); line-height: 1.55; color: var(--color-text-secondary); }\n.lintje-note__author { font: var(--text-meta); color: var(--color-text-muted); }\n", s = class extends r {
+var o = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n@media print { :host { break-inside: avoid; } }\n.lintje-note { height: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-note {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n  display: flex; flex-direction: column; gap: var(--space-2);\n  min-width: 0;\n}\n.lintje-note__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }\n.lintje-note__title { font: var(--text-tile-title); }\n.lintje-note__date { font: var(--text-tile-sub); color: var(--color-text-muted); }\n.lintje-note__text { font: var(--text-small); line-height: 1.55; color: var(--color-text-secondary); }\n.lintje-note__author { font: var(--text-meta); color: var(--color-text-muted); }\n", s = class extends t {
 	static {
-		this.styles = [i, n(o)];
+		this.styles = [e, r(o)];
 	}
 	static {
 		this.properties = { data: { attribute: !1 } };
@@ -19,9 +19,9 @@ var o = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { displ
       </header>
       <p class="lintje-note__text">${e.text}</p>
       <p class="lintje-note__author">— ${e.author}</p>
-    </section>` : t;
+    </section>` : i;
 	}
 };
-e("lintje-note", s);
+n("lintje-note", s);
 //#endregion
 export { s as LintjeNote };

package/dist-elements/tag/notifications.js

@@ -1,5 +1,5 @@
-import { $ as e, Bt as t, G as n, Gt as r, Ht as i, I as a, It as o, Lt as s, Nt as c, U as l, V as u, Z as d, et as f, qt as p, zt as m } from "../chunks/base-Bg-IFOPG.js";
-import { t as h } from "../chunks/focus-trap-9BnE-xWv.js";
+import { Gt as e, H as t, Ht as n, Jt as r, Kt as i, Q as a, Yt as o, Zt as s, en as c, et as l, lt as u, nn as d, q as f, st as p, ut as m } from "../chunks/base-CbmWxUig.js";
+import { t as h } from "../chunks/focus-trap-BwOxE5BX.js";
 import { t as g } from "../chunks/dialog-close-u75fVEw4.js";
 //#region src/components/frame/notifications/notifications.css?inline
 var _ = "/* The host is the bell's box; the panel is fixed and takes no space. */\n:host { display: inline-flex; flex: none; vertical-align: middle; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-notifications__bell {\n  position: relative;\n  display: flex; align-items: center; justify-content: center;\n  width: var(--h-touch); height: var(--lintje-tool-height, var(--h-touch));\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-notifications__bell:hover,\n.lintje-notifications__bell.is-open { background: var(--color-nav-hover); }\n\n/* The counter is placed from the bell's middle, so a bell as high as the bar does not carry it\n   up to the bar's edge. */\n.lintje-notifications__count {\n  position: absolute;\n  top: calc(50% - var(--h-touch) / 2 + var(--space-1)); right: var(--space-1);\n}\n/* The keyed figure is a new element per value, so the rise plays once per change. */\n.lintje-notifications__figure { display: inline-block; }\n.lintje-notifications__figure.is-replaced {\n  animation: lintje-rise var(--dur-badge) var(--ease-in-motion) both;\n}\n\n.lintje-notifications__panel {\n  width: 440px;\n  max-width: 100%;\n  max-height: 480px;\n  overflow-y: auto;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n.lintje-notifications__head {\n  display: flex; align-items: center; justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-notifications__heading { font: var(--text-tile-title); }\n/* The link-style button reaches the target height through a hit area above and below only. */\n.lintje-notifications__read {\n  position: relative;\n  min-height: var(--space-6);\n  margin-left: auto;\n  color: var(--color-link);\n  font-size: 0.875rem; font-weight: 700;\n  text-decoration: underline;\n}\n.lintje-notifications__read::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-notifications__read:hover { color: var(--color-link-hover); }\n\n.lintje-notifications__list { margin: 0; padding: 0; list-style: none; }\n.lintje-notifications__item {\n  display: flex; gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-notifications__item:last-child { border-bottom: 0; }\n.lintje-notifications__item.is-unread { background: var(--color-bg-selected); }\n.lintje-notifications__item:hover { background: var(--color-bg-subtle); }\n\n.lintje-notifications__dot,\n.lintje-notifications__dot-space { flex: 0 0 8px; height: 8px; margin-top: 7px; }\n.lintje-notifications__dot { border-radius: var(--radius-round); background: var(--color-accent-line); }\n\n.lintje-notifications__body { min-width: 0; }\n.lintje-notifications__title {\n  display: inline;\n  padding: 0;\n  color: var(--color-link);\n  font-size: 1rem; font-weight: 400;\n  text-align: left;\n  text-decoration: underline;\n}\n.lintje-notifications__title:hover { color: var(--color-link-hover); }\n.lintje-notifications__item.is-unread .lintje-notifications__title { font-weight: 700; }\n.lintje-notifications__text { margin: 0; font-size: 0.875rem; overflow-wrap: anywhere; }\n.lintje-notifications__when { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }\n\n.lintje-notifications__empty {\n  margin: 0;\n  padding: var(--space-6) var(--space-4);\n  color: var(--color-text-muted);\n  text-align: center;\n}\n\n/* Phone: the sheet takes focus only when the trap pulls back stray focus, and draws no ring. */\n.lintje-notifications__sheet {\n  position: fixed;\n  z-index: 85;\n  inset: 0;\n  overflow-y: auto;\n  background: var(--color-bg-surface);\n  animation: lintje-fade-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-notifications__sheet:focus { outline: none; }\n.lintje-notifications__panel.is-sheet { width: 100%; max-height: none; }\n.lintje-notifications__close { margin-right: calc(var(--space-2) * -1); }\n.lintje-notifications__close:hover { color: var(--color-text-primary); }\n.lintje-notifications__panel.is-sheet .lintje-notifications__head { padding-top: 0; padding-bottom: 0; min-height: var(--h-mobile-header); }\n\n/* Forced colours: the unread surface is dropped, so the dot keeps a system-colour fill. */\n@media (forced-colors: active) {\n  .lintje-notifications__dot { forced-color-adjust: none; background: CanvasText; }\n  .lintje-notifications__bell.is-open { outline: 1px solid Highlight; outline-offset: -1px; }\n}\n", v = 0;
@@ -12,12 +12,12 @@ function b(e, t = 9) {
 function x(e) {
 	return e === 1 ? "1 nieuwe melding" : `${e} nieuwe meldingen`;
 }
-var S = class extends m {
+var S = class extends r {
 	static {
 		this.styles = [
-			e,
-			i(g),
-			i(_)
+			u,
+			s(g),
+			s(_)
 		];
 	}
 	static {
@@ -47,9 +47,9 @@ var S = class extends m {
 		this.open = !1, e && this.bell?.focus();
 	}
 	constructor() {
-		super(), this.items = [], this.max = 9, this.open = !1, this.#e = 0, this.#t = !1, this.news = "", this.#n = 0, this.#r = !1, this.#i = new s(this, o), this.#a = `lintje-notifications-${++v}`, this.onFocusOut = (e) => {
+		super(), this.items = [], this.max = 9, this.open = !1, this.#e = 0, this.#t = !1, this.news = "", this.#n = 0, this.#r = !1, this.#i = new i(this, e), this.#a = `lintje-notifications-${++v}`, this.onFocusOut = (e) => {
 			let t = e.relatedTarget;
-			this.open && !this.#i.matches && t && (n(t, this) || n(this, t) || this.hide(!1));
+			this.open && !this.#i.matches && t && (l(t, this) || l(this, t) || this.hide(!1));
 		}, this.#o = null, this.#s = new h(), this.#c = (e) => {
 			e.key === "Escape" && this.#s.isTopmost() && this.hide(!0);
 		}, this.addEventListener("focusout", this.onFocusOut);
@@ -65,7 +65,7 @@ var S = class extends m {
 		let t = this.unread, n = this.#e;
 		this.#t = n > 0 && t > 0 && t !== n, this.#e = t, this.hasUpdated && t > n && this.#l(x(t - n));
 		let r = this.renderRoot.querySelector(".lintje-notifications__read");
-		t === 0 && r && l(r) && (this.#r = !0);
+		t === 0 && r && a(r) && (this.#r = !0);
 	}
 	#l(e) {
 		this.news = "", this.#n && cancelAnimationFrame(this.#n), this.#n = requestAnimationFrame(() => {
@@ -82,7 +82,7 @@ var S = class extends m {
 		t && !this.#o ? this.#u() : !t && this.#o && this.#d();
 	}
 	#u() {
-		this.#o = c(), document.addEventListener("keydown", this.#c);
+		this.#o = n(), document.addEventListener("keydown", this.#c);
 		let e = this.renderRoot.querySelector(".lintje-notifications__sheet"), t = this.renderRoot.querySelector(".lintje-notifications__close");
 		e && this.#s.activate(e, { focus: t ?? !0 });
 	}
@@ -92,72 +92,72 @@ var S = class extends m {
 	onPopoverClose(e) {
 		e.stopPropagation(), this.hide(e.detail?.reason === "escape");
 	}
-	choose(e, t) {
-		(!e.href || a(t)) && (this.hide(!0), this.emit("lintje-notification-open", e.href ? {
+	choose(e, n) {
+		(!e.href || t(n)) && (this.hide(!0), this.emit("lintje-notification-open", e.href ? {
 			id: e.id,
 			href: e.href
-		} : { id: e.id }) || t.preventDefault());
+		} : { id: e.id }) || n.preventDefault());
 	}
 	renderItem(e) {
-		let t = !!e.unread, n = e.href ? p`<a
+		let t = !!e.unread, n = e.href ? d`<a
           class="lintje-notifications__title"
           href=${e.href}
           @click=${(t) => this.choose(e, t)}
           >${e.title}</a
-        >` : p`<button
+        >` : d`<button
           type="button"
           class="lintje-notifications__title"
           @click=${(t) => this.choose(e, t)}
         >
           ${e.title}
         </button>`;
-		return p`<li class=${d({
+		return d`<li class=${p({
 			"lintje-notifications__item": !0,
 			"is-unread": t
 		})}>
-      ${t ? p`<span class="lintje-notifications__dot" role="img" aria-label="Ongelezen"></span>` : p`<span class="lintje-notifications__dot-space"></span>`}
+      ${t ? d`<span class="lintje-notifications__dot" role="img" aria-label="Ongelezen"></span>` : d`<span class="lintje-notifications__dot-space"></span>`}
       <div class="lintje-notifications__body">
         ${n}
-        ${e.text ? p`<p class="lintje-notifications__text">${e.text}</p>` : r}
+        ${e.text ? d`<p class="lintje-notifications__text">${e.text}</p>` : c}
         <p class="lintje-notifications__when">${e.when}</p>
       </div>
     </li>`;
 	}
 	renderPanel(e) {
-		return p`<div class=${d({
+		return d`<div class=${p({
 			"lintje-notifications__panel": !0,
 			"is-sheet": e
 		})}>
       <div class="lintje-notifications__head">
         <h2 class="lintje-notifications__heading">Meldingen</h2>
-        ${this.unread > 0 ? p`<button
+        ${this.unread > 0 ? d`<button
               type="button"
               class="lintje-notifications__read"
               @click=${() => this.emit("lintje-notifications-read")}
             >
               Alles gelezen
-            </button>` : r}
-        ${e ? p`<button
+            </button>` : c}
+        ${e ? d`<button
               type="button"
               class="lintje-dialog-close lintje-notifications__close"
               aria-label="Meldingen sluiten"
               @click=${() => this.hide(!0)}
             >
-              ${f("functioneel-kruis", { size: 16 })}
-            </button>` : r}
+              ${m("functioneel-kruis", { size: 16 })}
+            </button>` : c}
       </div>
-      ${this.items.length ? p`<ul class="lintje-notifications__list">
+      ${this.items.length ? d`<ul class="lintje-notifications__list">
             ${this.items.map((e) => this.renderItem(e))}
-          </ul>` : p`<p class="lintje-notifications__empty">
+          </ul>` : d`<p class="lintje-notifications__empty">
             Geen meldingen. Wat klaar is of mislukt, verschijnt hier.
           </p>`}
     </div>`;
 	}
 	render() {
 		let e = this.unread, t = this.#i.matches;
-		return p`<button
+		return d`<button
         type="button"
-        class=${d({
+        class=${p({
 			"lintje-notifications__bell": !0,
 			"is-open": this.open
 		})}
@@ -167,18 +167,18 @@ var S = class extends m {
         aria-controls=${this.#a}
         @click=${() => this.open ? this.hide(!1) : this.open = !0}
       >
-        ${f("functioneel-bel", { size: 20 })}
-        ${e > 0 ? p`<lintje-badge class="lintje-notifications__count" variant="unread" aria-hidden="true"
-              >${u(y(e, this.max), p`<span
-                  class=${d({
+        ${m("functioneel-bel", { size: 20 })}
+        ${e > 0 ? d`<lintje-badge class="lintje-notifications__count" variant="unread" aria-hidden="true"
+              >${f(y(e, this.max), d`<span
+                  class=${p({
 			"lintje-notifications__figure": !0,
 			"is-replaced": this.#t
 		})}
                   >${y(e, this.max)}</span
                 >`)}</lintje-badge
-            >` : r}
+            >` : c}
       </button>
-      ${t ? this.open ? p`<div
+      ${t ? this.open ? d`<div
               id=${this.#a}
               class="lintje-notifications__sheet"
               role="dialog"
@@ -187,7 +187,7 @@ var S = class extends m {
               tabindex="-1"
             >
               ${this.renderPanel(!0)}
-            </div>` : r : p`<lintje-popover
+            </div>` : c : d`<lintje-popover
             id=${this.#a}
             panel-role="dialog"
             label="Meldingen"
@@ -199,6 +199,6 @@ var S = class extends m {
       <span class="visually-hidden" role="status">${this.news}</span>`;
 	}
 };
-t("lintje-notifications", S);
+o("lintje-notifications", S);
 //#endregion
 export { S as LintjeNotifications, b as bellLabel, y as countLabel, x as newsMessage };

package/dist-elements/tag/number-input.js

@@ -1,5 +1,5 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, qt as o } from "../chunks/base-Bg-IFOPG.js";
-import { n as s, t as c } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a, ut as o } from "../chunks/base-CbmWxUig.js";
+import { n as s, t as c } from "../chunks/input-CRW_exv_.js";
 //#region src/components/inputs/number-input/number-input.css?inline
 var l = "/* The number field with its stepper. */\n\n/* --- Number field --------------------------------------------------------- */\n.lintje-number-input {\n  display: flex; align-items: stretch;\n  height: var(--h-control);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  border-radius: var(--radius);\n}\n.lintje-number-input.is-error { border: 2px solid var(--color-error); }\n.lintje-number-input.is-readonly { border: 1px solid var(--color-border-strong); background: var(--color-bg-subtle); }\n.lintje-number-input.is-readonly .lintje-number-input__step {\n  border-color: var(--color-border-strong);\n  color: var(--color-text-disabled);\n  cursor: default;\n}\n.lintje-number-input.is-readonly .lintje-number-input__step:hover { background: none; }\n.lintje-number-input.is-readonly .lintje-number-input__control { cursor: default; }\n.lintje-number-input.is-disabled { border: 1px solid var(--color-border-strong); background: var(--color-bg-subtle); }\n.lintje-number-input__step {\n  width: var(--h-control); flex: none;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-number-input__step--down { border-right: 1px solid var(--color-border-field); }\n.lintje-number-input__step--up { border-left: 1px solid var(--color-border-field); }\n.lintje-number-input.is-disabled .lintje-number-input__step { border-color: var(--color-border-strong); }\n.lintje-number-input__step:hover:not(:disabled):not(.is-limit) { background: var(--color-bg-subtle); }\n/* At `min` or `max` the step keeps the focus (`aria-disabled`) and looks disabled. */\n.lintje-number-input__step:disabled,\n.lintje-number-input__step.is-limit { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-number-input__control {\n  flex: 1; min-width: 0;\n  border: none; background: none;\n  padding: 0 var(--space-2);\n  text-align: center;\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-primary);\n  appearance: textfield;\n  -moz-appearance: textfield;\n}\n/* The browser's own spinner would sit beside the design's. */\n.lintje-number-input__control::-webkit-outer-spin-button,\n.lintje-number-input__control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n.lintje-number-input__control:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-number-input--unit .lintje-number-input__control { text-align: left; padding-left: 14px; }\n.lintje-number-input__unit {\n  display: flex; align-items: center; flex: none;\n  padding-right: 14px;\n  font-size: 1rem; color: var(--color-text-muted);\n}\n", u = "lintje-number-input-unit", d = class extends s {
 	constructor(...e) {
@@ -7,9 +7,9 @@ var l = "/* The number field with its stepper. */\n\n/* --- Number field -------
 	}
 	static {
 		this.styles = [
-			e,
-			r(c),
-			r(l)
+			r,
+			t(c),
+			t(l)
 		];
 	}
 	static {
@@ -47,9 +47,9 @@ var l = "/* The number field with its stepper. */\n\n/* --- Number field -------
 	}
 	stepButton(e) {
 		let t = e === -1, r = !this.disabled && (t ? this.atMin : this.atMax);
-		return o`<button
+		return i`<button
       type="button"
-      class=${i({
+      class=${a({
 			"lintje-number-input__step": !0,
 			[`lintje-number-input__step--${t ? "down" : "up"}`]: !0,
 			"is-limit": r
@@ -59,15 +59,15 @@ var l = "/* The number field with its stepper. */\n\n/* --- Number field -------
       aria-disabled=${this.readonly && !this.disabled || r ? "true" : n}
       @click=${() => this.nudge(e * this.step)}
     >
-      ${a(t ? "functioneel-minus" : "functioneel-plus", { size: 16 })}
+      ${o(t ? "functioneel-minus" : "functioneel-plus", { size: 16 })}
     </button>`;
 	}
 	render() {
 		let e = !!this.unit && !this.stepper, t = [e ? u : "", this.describedBy === n ? "" : this.describedBy].filter(Boolean).join(" ");
-		return o`<div class="lintje-field">
+		return i`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <div
-        class=${i({
+        class=${a({
 			"lintje-number-input": !0,
 			"lintje-number-input--unit": e,
 			"is-error": !!this.error,
@@ -94,13 +94,13 @@ var l = "/* The number field with its stepper. */\n\n/* --- Number field -------
           @change=${this.change}
           @keydown=${(e) => this.submitOnEnter(e, () => this.change(e))}
         />
-        ${e ? o`<span id=${u} class="lintje-number-input__unit">${this.unit}</span>` : n}
+        ${e ? i`<span id=${u} class="lintje-number-input__unit">${this.unit}</span>` : n}
         ${this.stepper ? this.stepButton(1) : n}
       </div>
       ${this.renderFoot()}
     </div>`;
 	}
 };
-t("lintje-number-input", d);
+e("lintje-number-input", d);
 //#endregion
 export { d as LintjeNumberInput };