lintje 0.1.1 → 0.2.0

package/dist-elements/tag/recording-status.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
 import { levelWord as o } from "./level-meter.js";
 import "./description-list.js";
 //#region src/components/feedback/recording-status/recording-status.css?inline
@@ -28,12 +28,12 @@ var d = class extends a {
 		};
 	}
 	renderLevel() {
-		return this.level == null ? t : r`<lintje-level-meter slot="level" .level=${this.level}></lintje-level-meter>`;
+		return this.level == null ? t : i`<lintje-level-meter slot="level" .level=${this.level}></lintje-level-meter>`;
 	}
 	renderConnection(e) {
 		let n = l[e], a = e === "lost" ? "Wacht op verbinding" : this.delay == null ? "" : `${this.delay} ${this.delay === 1 ? "seconde" : "seconden"} achter`;
-		return r`<span slot="connection" class="lintje-recording-status__connection"><span
-        class=${i({
+		return i`<span slot="connection" class="lintje-recording-status__connection"><span
+        class=${r({
 			"lintje-recording-status__signal": !0,
 			[`is-${e}`]: !0
 		})}
@@ -44,8 +44,8 @@ var d = class extends a {
 			2,
 			3,
 			4
-		].map((e) => r`<span
-              class=${i({
+		].map((e) => i`<span
+              class=${r({
 			"lintje-recording-status__step": !0,
 			"is-lit": e <= n
 		})}
@@ -53,7 +53,7 @@ var d = class extends a {
       </span>
       <span class="lintje-recording-status__words">
         <strong>${c[e]}</strong>
-        ${a ? r`<span class="lintje-recording-status__sub">${a}</span>` : t}
+        ${a ? i`<span class="lintje-recording-status__sub">${a}</span>` : t}
       </span></span>`;
 	}
 	render() {
@@ -77,7 +77,7 @@ var d = class extends a {
 				slot: "connection"
 			}] : []
 		];
-		return r`<lintje-description-list layout="grid" surface .columns=${n.length} .items=${n}>
+		return i`<lintje-description-list layout="grid" surface .columns=${n.length} .items=${n}>
       ${this.renderLevel()} ${e ? this.renderConnection(e) : t}
     </lintje-description-list>`;
 	}

package/dist-elements/tag/repeater.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, zt as i } from "../chunks/base-rBLTcEIv.js";
+import { Bt as e, Gt as t, Ht as n, qt as r, zt as i } from "../chunks/base-Bg-IFOPG.js";
 //#region src/components/forms/repeater/repeater.css?inline
 var a = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-repeater {\n  min-width: 0;\n  margin: 0; padding: 0; border: 0;\n}\n/* The legend stands above its rows as a field's label does above its control; the gap lives in\n   the body, because browsers differ on whether a legend takes part in a fieldset's flex gap. */\n.lintje-repeater__legend {\n  padding: 0 0 6px;\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-text-primary);\n}\n.lintje-repeater__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n:host([disabled]) .lintje-repeater__legend { color: var(--color-text-disabled); }\n.lintje-repeater__rows { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n.lintje-repeater__foot {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.lintje-repeater__count { font: var(--text-meta); color: var(--color-text-muted); }\n\n@media (max-width: 767px) {\n  .lintje-repeater__rows { gap: var(--space-5); }\n}\n", o = "/* One row of a repeater: the host's fields side by side, then the remove icon button. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n@media (max-width: 767px) {\n  :host(:not([index='0'])) {\n    padding-top: var(--space-5);\n    border-top: 1px solid var(--color-border-default);\n  }\n}\n\n/* --- */\n\n/* The button aligns with the controls' bottom edge when a field carries its label above it. */\n.lintje-repeater-row { display: flex; align-items: flex-end; gap: var(--space-2); min-width: 0; }\n.lintje-repeater-row__fields { flex: 1; min-width: 0; display: flex; gap: var(--space-2); }\n.lintje-repeater-row__fields ::slotted(*) { flex: 1 1 0; min-width: 0; }\n/* A square as high as the controls beside it. */\n.lintje-repeater-row__remove { flex: none; --h-icon-button: var(--h-control); }\n\n/* Below 768 px the fields stack and the remove button stands beside the first. */\n@media (max-width: 767px) {\n  .lintje-repeater-row { align-items: flex-start; }\n  .lintje-repeater-row__fields { flex-direction: column; }\n}\n", s = "input, select, textarea, button, [contenteditable=\"true\"], [tabindex]";
 function c(e) {

package/dist-elements/tag/segmented.js

@@ -1,5 +1,5 @@
-import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i } from "../chunks/base-rBLTcEIv.js";
-import { r as a, t as o } from "../chunks/input-jQVTln7H.js";
+import { Bt as e, Gt as t, Ht as n, Z as r, qt as i } from "../chunks/base-Bg-IFOPG.js";
+import { r as a, t as o } from "../chunks/input-BtuNFSWk.js";
 //#region src/components/inputs/segmented/segmented.css?inline
 var s = "/* The segmented control keeps `min-width: auto`: it never shrinks below its options. */\n:host { display: block; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The frame hugs its options: a wider host leaves its room outside the border, not in it. It\n   never grows past its room, so the element can read that room off the frame. */\n.lintje-segmented {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n  height: var(--h-control);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n}\n.lintje-segmented.is-error { border: 2px solid var(--color-error); }\n/* Disabled keeps the quiet border, also over an error. */\n:host([disabled]) .lintje-segmented { border: 1px solid var(--color-border-strong); }\n.lintje-segmented__option {\n  display: flex; align-items: center;\n  padding: 0 var(--space-3);\n  font-size: 1rem;\n  color: var(--color-text-primary);\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-segmented__option:hover:not(.is-active) { background: var(--color-bg-subtle); }\n.lintje-segmented__option:disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-segmented__option:disabled:hover { background: var(--color-bg-subtle); }\n/* Chosen is quiet, not filled: a filled surface is the page's one primary action. The edge is a\n   ring half inside, half over the frame, so it covers the frame's line instead of standing in it;\n   a real border would push the neighbouring segments over. */\n.lintje-segmented__option.is-active {\n  position: relative;\n  z-index: 1;\n  background: var(--color-choice-active-bg);\n  color: var(--color-accent-text);\n  box-shadow: 0 0 0 1px var(--color-accent-line), inset 0 0 0 1px var(--color-accent-line);\n  font-weight: 700;\n}\n.lintje-segmented__option:disabled.is-active {\n  background: var(--color-border-strong);\n  color: var(--color-text-disabled);\n  box-shadow: none;\n}\n\n.lintje-segmented__description {\n  margin: var(--space-2) 0 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-bg-subtle);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n}\n\n/* The bar cannot reach into the shadow root, so the control carries the bar's breakpoints. */\n@media (min-width: 1024px) and (max-width: 1439px) {\n  :host(:not([stacked])) .lintje-segmented__option { padding: 0 10px; }\n}\n@media (min-width: 768px) and (max-width: 1023px) {\n  :host { width: 100%; }\n  .lintje-segmented { width: 100%; }\n  .lintje-segmented__option { flex: 1; justify-content: center; }\n}\n:host([stacked]) .lintje-segmented { width: 100%; }\n:host([stacked]) .lintje-segmented__option { flex: 1; justify-content: center; }\n\n/* A row wider than its room: the options stand under each other, each the full width. */\n.lintje-segmented.is-column { flex-direction: column; width: 100%; height: auto; }\n.lintje-segmented.is-column .lintje-segmented__option { min-height: var(--h-touch); }\n\n/* Forced colours drop the fill and ring: every segment has a 1 px border, so nothing moves. */\n@media (forced-colors: active) {\n  .lintje-segmented__option { border: 1px solid Canvas; }\n  .lintje-segmented__option.is-active { border-color: Highlight; }\n  :host([disabled]) .lintje-segmented__option.is-active { border-color: GrayText; }\n}\n", c = "lintje-segmented-description", l = class extends a {
 	constructor(...e) {
@@ -46,10 +46,10 @@ var s = "/* The segmented control keeps `min-width: auto`: it never shrinks belo
 	}
 	render() {
 		let e = (this.options ?? []).find((e) => e.value === this.value)?.description, n = [e ? c : "", this.describedBy === t ? "" : this.describedBy].filter(Boolean).join(" ");
-		return r`<div class="lintje-field">
+		return i`<div class="lintje-field">
       ${this.renderLabel()}
       <div
-        class=${i({
+        class=${r({
 			"lintje-segmented": !0,
 			"is-column": this.column,
 			"is-error": !!this.error
@@ -59,9 +59,9 @@ var s = "/* The segmented control keeps `min-width: auto`: it never shrinks belo
         aria-describedby=${n || t}
         aria-invalid=${this.error ? "true" : t}
       >
-        ${(this.options ?? []).map((e) => r`<button
+        ${(this.options ?? []).map((e) => i`<button
             type="button"
-            class=${i({
+            class=${r({
 			"lintje-segmented__option": !0,
 			"is-active": e.value === this.value,
 			"is-bold": this.bold && e.value === this.value
@@ -73,7 +73,7 @@ var s = "/* The segmented control keeps `min-width: auto`: it never shrinks belo
             ${e.label}
           </button>`)}
       </div>
-      ${e ? r`<p class="lintje-segmented__description" id=${c}>${e}</p>` : t}
+      ${e ? i`<p class="lintje-segmented__description" id=${c}>${e}</p>` : t}
       ${this.renderFoot()}
     </div>`;
 	}

package/dist-elements/tag/select.js

@@ -1,5 +1,5 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o } from "../chunks/base-rBLTcEIv.js";
-import { r as s, t as c } from "../chunks/input-jQVTln7H.js";
+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 { r as s, t as c } from "../chunks/input-BtuNFSWk.js";
 //#region src/components/inputs/select/select.css?inline
 var l = "/* The select. Its width is the host's, set from outside by tag. */\n:host { display: block; width: 180px; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-select { position: relative; display: flex; align-items: center; }\n.lintje-select__control {\n  appearance: none;\n  width: 100%;\n  height: var(--h-control);\n  padding: 0 34px 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  font-size: 1rem;\n  color: var(--color-text-primary);\n  border-radius: var(--radius);\n}\n.lintje-select__control.is-bold { font-weight: 700; }\n.lintje-select__control.is-error { border: 2px solid var(--color-error); }\n.lintje-select__control:disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-select__control:disabled { border: 1px solid var(--color-border-strong); }\n.lintje-select__icon { position: absolute; right: 12px; pointer-events: none; color: var(--color-text-primary); }\n", u = class extends s {
 	constructor(...e) {
@@ -27,12 +27,12 @@ var l = "/* The select. Its width is the host's, set from outside by tag. */\n:h
 		this.value = e.target.value, this.commit(this.value);
 	}
 	render() {
-		return i`<div class="lintje-field">
+		return o`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <div class="lintje-select">
         <select
           id=${this.controlId}
-          class=${a({
+          class=${i({
 			"lintje-select__control": !0,
 			"is-bold": this.bold,
 			"is-error": !!this.error
@@ -45,11 +45,11 @@ var l = "/* The select. Its width is the host's, set from outside by tag. */\n:h
           .value=${this.value}
           @change=${this.choose}
         >
-          ${(this.options ?? []).map((e) => i`<option value=${e.value} ?selected=${e.value === this.value}>
+          ${(this.options ?? []).map((e) => o`<option value=${e.value} ?selected=${e.value === this.value}>
                 ${e.label}
               </option>`)}
         </select>
-        ${o("functioneel-delta-omlaag", {
+        ${a("functioneel-delta-omlaag", {
 			size: 16,
 			className: "lintje-select__icon"
 		})}

package/dist-elements/tag/session-expiry.js

@@ -1,5 +1,5 @@
-import { Bt as e, Gt as t, Ht as n, It as r, Kt as i, Lt as a, Nt as o, zt as s } from "../chunks/base-rBLTcEIv.js";
-import { n as c, t as l } from "../chunks/focus-trap-w3vCamJ6.js";
+import { Bt as e, Gt as t, Ht as n, It as r, Lt as i, Nt as a, qt as o, zt as s } from "../chunks/base-Bg-IFOPG.js";
+import { n as c, t as l } from "../chunks/focus-trap-9BnE-xWv.js";
 import "./announcement.js";
 import { t as u } from "../chunks/confirm-dialog-D5EVGuil.js";
 //#region src/components/frame/session-expiry/session-expiry.css?inline
@@ -23,7 +23,7 @@ function h(e) {
 }
 var g = class extends s {
 	constructor(...e) {
-		super(...e), this.warnBefore = 120, this.restoredReason = "logout", this.busy = !1, this.expired = !1, this.now = Date.now, this.clock = 0, this.#e = new a(this, r), this.#t = null, this.#n = null, this.#r = new l(), this.#i = null, this.#a = (e) => {
+		super(...e), this.warnBefore = 120, this.restoredReason = "logout", this.busy = !1, this.expired = !1, this.now = Date.now, this.clock = 0, this.#e = new i(this, r), this.#t = null, this.#n = null, this.#r = new l(), this.#i = null, this.#a = (e) => {
 			e.key === "Escape" && this.#r.isTopmost() && (e.stopPropagation(), e.preventDefault());
 		};
 	}
@@ -92,7 +92,7 @@ var g = class extends s {
 		if (t === "active") this.#c();
 		else {
 			if (!this.#n) {
-				this.#n = o(), document.addEventListener("keydown", this.#a, !0);
+				this.#n = a(), document.addEventListener("keydown", this.#a, !0);
 				let e = this.renderRoot.querySelector(".lintje-session-expiry");
 				e && this.#r.activate(e, { focus: !1 });
 			}
@@ -118,7 +118,7 @@ var g = class extends s {
 			title: "Je concept is teruggezet.",
 			text: e ? `Het is van ${e}, van voor het afmelden.` : "Het is van voor het afmelden."
 		};
-		return i`<lintje-announcement compact .data=${n}>
+		return o`<lintje-announcement compact .data=${n}>
       <lintje-button slot="action" variant="link" @click=${() => this.emit("lintje-draft-discard")}
         >Concept weggooien</lintje-button
       >
@@ -126,8 +126,8 @@ var g = class extends s {
 	}
 	renderDialog(e) {
 		if (e === "active") return t;
-		let n = this.#e.matches, r = e === "expired", a = this.expiresAt ? new Date(this.expiresAt).getTime() : this.clock;
-		return i`<div class="lintje-confirm-dialog__scrim">
+		let n = this.#e.matches, r = e === "expired", i = this.expiresAt ? new Date(this.expiresAt).getTime() : this.clock;
+		return o`<div class="lintje-confirm-dialog__scrim">
       <div
         class="lintje-confirm-dialog lintje-session-expiry"
         role="alertdialog"
@@ -137,23 +137,23 @@ var g = class extends s {
         aria-describedby="lintje-session-expiry-text"
       >
         <h2 id="lintje-session-expiry-heading" class="lintje-confirm-dialog__heading">
-          ${r ? "Je bent afgemeld" : m(a - this.clock)}
+          ${r ? "Je bent afgemeld" : m(i - this.clock)}
         </h2>
         <div id="lintje-session-expiry-text" class="lintje-confirm-dialog__text">
-          ${r ? i`<slot name="expired"
+          ${r ? o`<slot name="expired"
                   >Je sessie is verlopen. Meld je opnieuw aan; je komt terug op deze pagina.</slot
-                >` : i`<slot
+                >` : o`<slot
                   >Je invoer wordt bewaard in deze browser. Blijf aangemeld om door te werken.</slot
                 >`}
         </div>
         <div class="lintje-confirm-dialog__actions">
-          ${r ? i`<lintje-button
+          ${r ? o`<lintje-button
                 class="lintje-session-expiry__primary"
                 variant="primary"
                 ?block=${n}
                 @click=${() => this.emit("lintje-login")}
                 >Opnieuw aanmelden</lintje-button
-              >` : i`<lintje-button
+              >` : o`<lintje-button
                   class="lintje-session-expiry__logout"
                   variant="tertiary"
                   ?block=${n}
@@ -176,7 +176,7 @@ var g = class extends s {
     </div>`;
 	}
 	render() {
-		return i`${this.renderRestored()}${this.renderDialog(this.phase)}`;
+		return o`${this.renderRestored()}${this.renderDialog(this.phase)}`;
 	}
 };
 e("lintje-session-expiry", g);