lintje 0.1.1

package/dist-elements/tag/segmented.js

@@ -0,0 +1,83 @@
+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";
+//#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) {
+		super(...e), this.value = "", this.bold = !1, this.stacked = !1, this.column = !1, this.#e = 0, this.#t = null;
+	}
+	static {
+		this.styles = [n(s), n(o)];
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			bold: { type: Boolean },
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			options: { attribute: !1 },
+			column: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	connectedCallback() {
+		super.connectedCallback(), typeof ResizeObserver < "u" && (this.#t = new ResizeObserver(() => this.#n()), this.#t.observe(this));
+	}
+	disconnectedCallback() {
+		this.#t?.disconnect(), this.#t = null, super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("options") && (this.column = !1);
+	}
+	updated(e) {
+		super.updated(e), this.#n();
+	}
+	#n() {
+		let e = this.renderRoot.querySelector(".lintje-segmented");
+		if (!e || !e.clientWidth) return;
+		this.column || (this.#e = e.scrollWidth);
+		let t = this.#e > e.clientWidth;
+		t !== this.column && (this.column = t);
+	}
+	choose(e) {
+		this.value = e, this.commit(e);
+	}
+	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">
+      ${this.renderLabel()}
+      <div
+        class=${i({
+			"lintje-segmented": !0,
+			"is-column": this.column,
+			"is-error": !!this.error
+		})}
+        role="group"
+        aria-labelledby=${this.labelId}
+        aria-describedby=${n || t}
+        aria-invalid=${this.error ? "true" : t}
+      >
+        ${(this.options ?? []).map((e) => r`<button
+            type="button"
+            class=${i({
+			"lintje-segmented__option": !0,
+			"is-active": e.value === this.value,
+			"is-bold": this.bold && e.value === this.value
+		})}
+            aria-pressed=${e.value === this.value}
+            ?disabled=${this.disabled}
+            @click=${() => this.choose(e.value)}
+          >
+            ${e.label}
+          </button>`)}
+      </div>
+      ${e ? r`<p class="lintje-segmented__description" id=${c}>${e}</p>` : t}
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+e("lintje-segmented", l);
+//#endregion
+export { l as LintjeSegmented };

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

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

package/dist-elements/tag/select.js

@@ -0,0 +1,63 @@
+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";
+//#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) {
+		super(...e), this.value = "", this.bold = !1, this.stacked = !1;
+	}
+	static {
+		this.styles = [
+			e,
+			r(l),
+			r(c)
+		];
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			bold: { type: Boolean },
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			options: { attribute: !1 }
+		};
+	}
+	choose(e) {
+		this.value = e.target.value, this.commit(this.value);
+	}
+	render() {
+		return i`<div class="lintje-field">
+      ${this.renderLabel(this.controlId)}
+      <div class="lintje-select">
+        <select
+          id=${this.controlId}
+          class=${a({
+			"lintje-select__control": !0,
+			"is-bold": this.bold,
+			"is-error": !!this.error
+		})}
+          aria-labelledby=${this.labelId}
+          aria-describedby=${this.describedBy}
+          aria-invalid=${this.error ? "true" : n}
+          aria-required=${this.required ? "true" : n}
+          ?disabled=${this.disabled}
+          .value=${this.value}
+          @change=${this.choose}
+        >
+          ${(this.options ?? []).map((e) => i`<option value=${e.value} ?selected=${e.value === this.value}>
+                ${e.label}
+              </option>`)}
+        </select>
+        ${o("functioneel-delta-omlaag", {
+			size: 16,
+			className: "lintje-select__icon"
+		})}
+      </div>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-select", u);
+//#endregion
+export { u as LintjeSelect };

package/dist-elements/tag/session-expiry.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/frame/session-expiry/session-expiry.js'

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

@@ -0,0 +1,184 @@
+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 "./announcement.js";
+import { t as u } from "../chunks/confirm-dialog-D5EVGuil.js";
+//#region src/components/frame/session-expiry/session-expiry.css?inline
+var d = "/* The warning is a fixed window in `confirm-dialog.css`'s frame. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n@media (max-width: 767px) {\n  .lintje-session-expiry__primary { order: 1; }\n  .lintje-session-expiry__logout { order: 2; }\n}\n", f = 20;
+function p(e, t, n, r = !1) {
+	if (r) return "expired";
+	if (e === null || Number.isNaN(e)) return "active";
+	let i = e - t;
+	return i <= 0 ? "expired" : i <= n * 1e3 ? "warning" : "active";
+}
+function m(e) {
+	let t = Math.max(1, Math.ceil(e / 6e4));
+	return `Je sessie verloopt over ${t} ${t === 1 ? "minuut" : "minuten"}`;
+}
+function h(e) {
+	let t = new Date(e);
+	return Number.isNaN(t.getTime()) ? null : t.toLocaleTimeString("nl-NL", {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+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) => {
+			e.key === "Escape" && this.#r.isTopmost() && (e.stopPropagation(), e.preventDefault());
+		};
+	}
+	static {
+		this.styles = [n(u), n(d)];
+	}
+	static {
+		this.properties = {
+			expiresAt: {
+				type: String,
+				attribute: "expires-at"
+			},
+			warnBefore: {
+				type: Number,
+				attribute: "warn-before"
+			},
+			restoredAt: {
+				type: String,
+				attribute: "restored-at"
+			},
+			restoredReason: {
+				type: String,
+				attribute: "restored-reason"
+			},
+			busy: {
+				type: Boolean,
+				reflect: !0
+			},
+			expired: {
+				type: Boolean,
+				reflect: !0
+			},
+			now: { attribute: !1 },
+			clock: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	get phase() {
+		let e = this.expiresAt ? new Date(this.expiresAt).getTime() : null, t = Number.isFinite(this.warnBefore) ? this.warnBefore : 120;
+		return p(e, this.clock, Math.max(20, t), this.expired);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.clock = this.now(), this.#o();
+	}
+	disconnectedCallback() {
+		this.#s(), this.#c(), super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("expiresAt") || e.has("now")) && (this.clock = this.now());
+	}
+	#o() {
+		if (!this.expiresAt || !this.isConnected) return this.#s();
+		this.#t === null && (this.#t = setInterval(() => this.clock = this.now(), 1e3));
+	}
+	#s() {
+		this.#t !== null && clearInterval(this.#t), this.#t = null;
+	}
+	updated(e) {
+		super.updated(e), e.has("expiresAt") && this.#o();
+		let t = this.phase;
+		if (t === "active") this.#c();
+		else {
+			if (!this.#n) {
+				this.#n = o(), document.addEventListener("keydown", this.#a, !0);
+				let e = this.renderRoot.querySelector(".lintje-session-expiry");
+				e && this.#r.activate(e, { focus: !1 });
+			}
+			if (this.#i !== t) {
+				this.#i = t;
+				let e = this.renderRoot.querySelector(".lintje-session-expiry__primary");
+				e && e.updateComplete.then(() => {
+					this.#r.isTopmost() && c(e).focus();
+				});
+			}
+		}
+	}
+	#c() {
+		this.#i = null, this.#n && (document.removeEventListener("keydown", this.#a, !0), this.#n(), this.#n = null, this.#r.deactivate());
+	}
+	renderRestored() {
+		if (!this.restoredAt) return t;
+		let e = h(this.restoredAt), n = this.restoredReason === "reload" ? {
+			kind: "ok",
+			text: e ? `Je concept van ${e} is teruggezet.` : "Je concept is teruggezet."
+		} : {
+			kind: "ok",
+			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}>
+      <lintje-button slot="action" variant="link" @click=${() => this.emit("lintje-draft-discard")}
+        >Concept weggooien</lintje-button
+      >
+    </lintje-announcement>`;
+	}
+	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">
+      <div
+        class="lintje-confirm-dialog lintje-session-expiry"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="lintje-session-expiry-heading"
+        tabindex="-1"
+        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)}
+        </h2>
+        <div id="lintje-session-expiry-text" class="lintje-confirm-dialog__text">
+          ${r ? i`<slot name="expired"
+                  >Je sessie is verlopen. Meld je opnieuw aan; je komt terug op deze pagina.</slot
+                >` : i`<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
+                class="lintje-session-expiry__primary"
+                variant="primary"
+                ?block=${n}
+                @click=${() => this.emit("lintje-login")}
+                >Opnieuw aanmelden</lintje-button
+              >` : i`<lintje-button
+                  class="lintje-session-expiry__logout"
+                  variant="tertiary"
+                  ?block=${n}
+                  ?disabled=${this.busy}
+                  @click=${() => this.emit("lintje-logout")}
+                  >Afmelden</lintje-button
+                >
+                <lintje-button
+                  class="lintje-session-expiry__primary"
+                  variant="primary"
+                  ?block=${n}
+                  ?busy=${this.busy}
+                  @click=${() => {
+			this.busy || this.emit("lintje-session-extend");
+		}}
+                  >Aangemeld blijven</lintje-button
+                >`}
+        </div>
+      </div>
+    </div>`;
+	}
+	render() {
+		return i`${this.renderRestored()}${this.renderDialog(this.phase)}`;
+	}
+};
+e("lintje-session-expiry", g);
+//#endregion
+export { g as LintjeSessionExpiry, f as MIN_WARNING, h as clockTime, p as sessionPhase, m as warningTitle };

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

@@ -0,0 +1 @@
+export * from '../types/components/frame/shell/shell.js'