lintje 0.2.0 → 0.4.0

package/dist-elements/chunks/input-BtuNFSWk.js

@@ -1,195 +0,0 @@
-import { Gt as e, O as t, Z as n, et as r, qt as i } from "./base-Bg-IFOPG.js";
-import { d as a, s as o, u as s } from "./controls-B1455oPG.js";
-//#region src/components/inputs/shared/field-foot.ts
-function c(t, n, r) {
-	return n ? r.errorId : t ? r.hintId : e;
-}
-function l(t, n, a, o = !0) {
-	return n ? i`<span id=${a.errorId} class="lintje-field__error" role=${o ? "alert" : e}
-      >${r("functioneel-waarschuwing", { size: 14 })}${n}</span
-    >` : t ? i`<span id=${a.hintId} class="lintje-field__hint">${t}</span>` : e;
-}
-//#endregion
-//#region src/components/inputs/shared/input.ts
-var u = "(niet verplicht)", d = "afwijkend van standaard", f = class extends t {
-	static {
-		this.properties = {
-			name: { type: String },
-			label: { type: String },
-			hideLabel: {
-				type: Boolean,
-				attribute: "hide-label"
-			},
-			hint: { type: String },
-			error: { type: String },
-			disabled: {
-				type: Boolean,
-				reflect: !0
-			},
-			modified: {
-				type: Boolean,
-				reflect: !0
-			},
-			required: {
-				type: Boolean,
-				reflect: !0
-			},
-			optional: { type: Boolean },
-			layout: {
-				type: String,
-				reflect: !0
-			},
-			resetLabel: {
-				type: String,
-				attribute: "reset-label"
-			}
-		};
-	}
-	static {
-		this.formAssociated = !0;
-	}
-	#e;
-	#t;
-	constructor() {
-		super(), this.name = "", this.label = "", this.hideLabel = !1, this.disabled = !1, this.modified = !1, this.required = !1, this.optional = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : null, this.#t = !1, this.addController({ hostUpdated: () => this.syncForm() });
-	}
-	get postedValue() {
-		return s(this);
-	}
-	syncForm() {
-		if (this.#t || (this.#t = !0, this.#e = structuredClone(s(this))), !this.internals) return;
-		let e = new FormData();
-		if (this.name && !this.disabled) for (let [t, n] of o(this.name, this.postedValue)) e.append(t, n);
-		this.internals.setFormValue(e);
-	}
-	formResetCallback() {
-		a(this, structuredClone(this.#e));
-	}
-	formDisabledCallback(e) {
-		this.disabled = e;
-	}
-	get labelId() {
-		return "lintje-input-label";
-	}
-	get controlId() {
-		return "lintje-input-control";
-	}
-	focusControl(e) {
-		if (this.disabled) return;
-		let t = this.renderRoot;
-		(t.querySelector(`#${this.controlId}`) ?? t.querySelector("input[type=\"radio\"]:checked:not(:disabled)") ?? [...t.querySelectorAll("input, select, button, textarea")].find((e) => !e.disabled))?.focus(e);
-	}
-	focus(e) {
-		this.focusControl(e);
-	}
-	get hintId() {
-		return "lintje-input-hint";
-	}
-	get errorId() {
-		return "lintje-input-error";
-	}
-	get footMessage() {
-		return this.error ?? "";
-	}
-	get describedBy() {
-		return c(this.hint, this.footMessage, {
-			hintId: this.hintId,
-			errorId: this.errorId
-		});
-	}
-	commit(e) {
-		this.announce(e);
-	}
-	announce(e, t = e) {
-		this.disabled || (this.emitLocal("lintje-change", e), this.name && this.emit("lintje-values-change", { [this.name]: t }));
-	}
-	renderLabel(t, r = e) {
-		let a = () => this.focusControl();
-		if (this.hideLabel) {
-			let e = this.renderLabelSuffix();
-			return t ? i`<label id=${this.labelId} for=${t} class="visually-hidden">${this.label} ${e}</label>` : i`<span id=${this.labelId} class="visually-hidden" @click=${a}>${this.label} ${e}</span>`;
-		}
-		let o = n({
-			"lintje-label": !0,
-			"is-modified": this.modified
-		}), s = this.modified ? i`<span class="lintje-label__dot"><span class="visually-hidden">${d}</span></span>` : e, c = this.renderLabelSuffix();
-		return t ? i`<label id=${this.labelId} for=${t} class=${o}>${this.label} ${c} ${s} ${r}</label>` : i`<span id=${this.labelId} class=${o} @click=${a}>${this.label} ${c} ${s} ${r}</span>`;
-	}
-	renderLabelSuffix() {
-		return this.isOptional ? i`<span class="lintje-label__optional">${u}</span>` : e;
-	}
-	get isOptional() {
-		return this.optional && !this.required;
-	}
-	get labelSuffixText() {
-		return [this.isOptional ? u : "", this.modified && !this.hideLabel ? d : ""].filter(Boolean).map((e) => ` ${e}`).join("");
-	}
-	get labelText() {
-		return this.label ? `${this.label}${this.labelSuffixText}` : "";
-	}
-	renderFoot() {
-		let e = l(this.hint, this.footMessage, {
-			hintId: this.hintId,
-			errorId: this.errorId
-		});
-		return !this.modified || !this.resetLabel ? e : i`${e}<button
-        type="button"
-        class="lintje-field__reset"
-        ?disabled=${this.disabled}
-        @click=${() => {
-			this.focusControl(), this.emitLocal("lintje-reset");
-		}}
-      >
-        ${this.resetLabel}
-      </button>`;
-	}
-}, p = class extends f {
-	constructor(...e) {
-		super(...e), this.readonly = !1, this.initialValue = void 0;
-	}
-	static {
-		this.properties = {
-			name: {
-				type: String,
-				reflect: !0
-			},
-			readonly: {
-				type: Boolean,
-				reflect: !0
-			}
-		};
-	}
-	get nativeControl() {
-		return this.renderRoot.querySelector(`#${this.controlId}`);
-	}
-	announce(e, t = e) {
-		this.readonly || super.announce(e, t);
-	}
-	firstUpdated(e) {
-		super.firstUpdated(e), this.initialValue = this.value;
-	}
-	syncForm() {}
-	updated(e) {
-		super.updated(e);
-		let t = this.internals;
-		if (!t) return;
-		t.setFormValue(this.disabled ? null : this.formValue);
-		let n = this.nativeControl;
-		this.required && !this.disabled && !this.readonly && this.formValue === "" && n ? t.setValidity({ valueMissing: !0 }, n.validationMessage || "Vul dit veld in.", n) : t.setValidity({});
-	}
-	submitOnEnter(e, t) {
-		if (e.key !== "Enter" || e.isComposing || this.readonly || this.disabled) return;
-		t();
-		let n = this.internals?.form;
-		n && typeof n.requestSubmit == "function" && setTimeout(() => {
-			e.defaultPrevented || n.requestSubmit();
-		});
-	}
-	formResetCallback() {
-		this.value = this.initialValue;
-		let e = this.nativeControl;
-		e && (e.value = this.formValue), this.requestUpdate();
-	}
-}, m = "/*\n * The fields' own boxes and the `.lintje-choice` rules of the checkbox, radio and toggle.\n * `lintje-data-table` adopts this sheet too for its selectable rows' checkbox; the\n * `:host(lintje-multiselect)` blocks do not match there.\n */\n:host(lintje-multiselect) {\n  display: block;\n  min-width: 0;\n  width: 180px;\n}\n:host(lintje-range) {\n  display: block;\n  min-width: 0;\n  width: 180px;\n}\n:host(lintje-text-input),\n:host(lintje-number-input),\n:host(lintje-checkbox),\n:host(lintje-toggle),\n:host(lintje-radio-group) {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* Order matters in every field sheet: disabled wins over read-only, read-only over error, at\n   equal specificity. A disabled control cannot be in error, so its rule sets the whole border. */\n\n.lintje-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.lintje-label {\n  display: flex; align-items: baseline; gap: var(--space-2);\n  font-size: 0.875rem; font-weight: 700; color: var(--color-text-primary);\n  padding: 0;\n}\n.lintje-label.is-modified { color: var(--color-accent-text); }\n.lintje-label__dot {\n  width: 6px; height: 6px; border-radius: var(--radius-round);\n  background: var(--color-attention);\n  flex: none; align-self: center;\n}\n:host([disabled]) .lintje-label { color: var(--color-text-disabled); }\n.lintje-label__optional { font-weight: 400; color: var(--color-text-muted); }\n:host([disabled]) .lintje-label__optional { color: var(--color-text-disabled); }\n/* A value and its unit stay together when a long label wraps. */\n.lintje-field__value { font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }\n.lintje-field__hint { font: var(--text-meta); color: var(--color-text-muted); }\n.lintje-field__error {\n  display: flex; align-items: center; gap: 6px;\n  font: var(--text-meta); color: var(--color-error-text); font-weight: 700;\n}\n\n/* --- A setting's row: name and hint on the left, the control on the right ----- */\n/* A row reads its own width, not the screen's: in a drawer it stays a column. */\n:host([layout='row']) { width: 100%; container-type: inline-size; }\n@container (min-width: 35rem) {\n  :host([layout='row']) .lintje-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, calc(8 * var(--space-10)));\n    gap: var(--space-1) var(--space-8);\n    align-items: center;\n  }\n  :host([layout='row']) .lintje-field > * { grid-column: 2; }\n  /* Regular weight: the bold above it is the section's heading, the grey under it the hint. */\n  :host([layout='row']) .lintje-field > .lintje-label {\n    grid-column: 1; grid-row: 1;\n    font: var(--text-ui);\n  }\n  :host([layout='row']) .lintje-field > .lintje-field__hint,\n  :host([layout='row']) .lintje-field > .lintje-field__error { grid-column: 1; grid-row: 2; align-self: start; }\n  :host([layout='row']) .lintje-field > .lintje-field__reset { grid-column: 1; grid-row: 3; }\n  /* A switch is its own label: the row is the label, the switch stands at its right edge. */\n  :host([layout='row']) .lintje-field > .lintje-choice {\n    grid-column: 1 / -1; grid-row: 1;\n    flex-direction: row-reverse; justify-content: space-between;\n  }\n}\n\n/* Back to the default: a link, so it stays quieter than the field it belongs to. */\n.lintje-field__reset {\n  align-self: flex-start;\n  justify-self: start;\n  min-height: var(--h-target);\n  padding: 0;\n  border: 0;\n  background: none;\n  color: var(--color-link);\n  font: var(--text-meta);\n  font-weight: 700;\n  text-decoration: underline;\n  cursor: pointer;\n}\n.lintje-field__reset:hover { color: var(--color-link-hover); }\n\n/* --- Checkbox, radio, toggle ---------------------------------------------- */\n.lintje-choice {\n  display: flex; align-items: center; gap: 10px;\n  min-height: var(--h-target);\n  font-size: 1rem;\n  cursor: pointer;\n}\n.lintje-choice__input { position: absolute; opacity: 0; width: 0; height: 0; }\n.lintje-choice__label.is-modified { color: var(--color-accent-text); font-weight: 700; }\n\n.lintje-choice__box {\n  width: 24px; height: 24px; flex: none;\n  display: flex; align-items: center; justify-content: center;\n  border: 2px solid var(--color-border-choice);\n  background: var(--color-bg-surface);\n  color: var(--color-action-primary-text); font-size: 0.875rem; font-weight: 700; line-height: 1;\n  transition: background-color var(--dur-hover) var(--ease-in-motion),\n    border-color var(--dur-hover) var(--ease-in-motion);\n}\n/* The mark is always drawn and grows in when the box is checked, so checking and unchecking both move. */\n.lintje-choice__mark {\n  opacity: 0; transform: scale(0.4);\n  transition: opacity var(--dur-hover) var(--ease-in-motion),\n    transform var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-choice__input:checked ~ .lintje-choice__box .lintje-choice__mark,\n.lintje-choice__input:indeterminate ~ .lintje-choice__box .lintje-choice__mark {\n  opacity: 1; transform: none;\n}\n/* The border takes the primary-fill border: in dark the tint, so the box is no dark square. */\n.lintje-choice__input:checked ~ .lintje-choice__box,\n.lintje-choice__input:indeterminate ~ .lintje-choice__box {\n  background: var(--color-accent); border-color: var(--color-action-primary-border);\n}\n.lintje-choice__input:focus-visible ~ .lintje-choice__box,\n.lintje-choice__input:focus-visible ~ .lintje-choice__radio,\n.lintje-choice__input:focus-visible ~ .lintje-choice__switch {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n\n.lintje-choice__radio {\n  width: 24px; height: 24px; flex: none;\n  border: 2px solid var(--color-border-choice);\n  border-radius: 50%;\n  background: var(--color-bg-surface);\n  display: flex; align-items: center; justify-content: center;\n}\n/* Ring and dot take the line accent: the dot stands on the surface by itself, so the primary\n   fill would sink into the dark surface. */\n.lintje-choice__input:checked ~ .lintje-choice__radio { border-color: var(--color-accent-line); }\n.lintje-choice__input:checked ~ .lintje-choice__radio::after {\n  content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent-line);\n}\n\n/* Off: edged with the field's edge (3:1, WCAG 1.4.11) as an inset ring, keeping the box size. */\n.lintje-choice__switch {\n  box-sizing: border-box;\n  width: 40px; height: 22px; flex: none;\n  border-radius: 11px;\n  /* Off is a filled track, not a pale one with a ring: the fill alone reaches 3:1. */\n  background: var(--color-border-field);\n  display: flex; align-items: center;\n  padding: 2px;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-choice__knob {\n  width: 18px; height: 18px; display: block;\n  border-radius: 50%;\n  background: var(--color-bg-surface);\n  transition: transform var(--dur-hover) var(--ease-in-motion);\n}\n/* An inset ring, not a border: a border would eat into the knob's inset and travel. */\n.lintje-choice__input:checked ~ .lintje-choice__switch {\n  background: var(--color-accent);\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border);\n}\n.lintje-choice__input:checked ~ .lintje-choice__switch .lintje-choice__knob { transform: translateX(18px); }\n\n.lintje-choice.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-choice__input:disabled ~ .lintje-choice__box,\n.lintje-choice__input:disabled ~ .lintje-choice__radio {\n  border-color: var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n}\n.lintje-choice__input:disabled:checked ~ .lintje-choice__box {\n  background: var(--color-border-strong);\n}\n.lintje-choice__input:disabled:checked ~ .lintje-choice__radio::after {\n  background: var(--color-border-strong);\n}\n/* After the checked rule, so a disabled switch also loses its inset ring. */\n.lintje-choice__input:disabled ~ .lintje-choice__switch { background: var(--color-border-default); box-shadow: none; }\n\n/* --- Stacked in the filter sheet ----------------------------------------- */\n:host([stacked]) {\n  width: 100%;\n  --h-control: var(--h-touch);\n}\n\n/* --- Forced colours ------------------------------------------------------- */\n/* Fills and box-shadows are dropped: the dot, pill and knob keep their drawing in system\n   colours. The pill takes a 1 px border and gives up 1 px of its inset, so the knob's travel stays. */\n@media (forced-colors: active) {\n  .lintje-label__dot { forced-color-adjust: none; background: CanvasText; }\n\n  .lintje-choice__input:focus-visible ~ .lintje-choice__box,\n  .lintje-choice__input:focus-visible ~ .lintje-choice__radio,\n  .lintje-choice__input:focus-visible ~ .lintje-choice__switch { outline-color: Highlight; }\n\n  .lintje-choice__input:checked ~ .lintje-choice__box,\n  .lintje-choice__input:indeterminate ~ .lintje-choice__box,\n  .lintje-choice__input:checked ~ .lintje-choice__radio { border-color: Highlight; }\n  .lintje-choice__radio::after { forced-color-adjust: none; }\n  .lintje-choice__input:checked ~ .lintje-choice__radio::after { background: Highlight; }\n\n  .lintje-choice__switch { border: 1px solid CanvasText; padding: 1px; }\n  .lintje-choice__input:checked ~ .lintje-choice__switch { border-color: Highlight; }\n  .lintje-choice__knob { forced-color-adjust: none; background: CanvasText; }\n  .lintje-choice__input:checked ~ .lintje-choice__switch .lintje-choice__knob { background: Highlight; }\n\n  .lintje-choice__input:disabled ~ .lintje-choice__box,\n  .lintje-choice__input:disabled ~ .lintje-choice__radio,\n  .lintje-choice__input:disabled ~ .lintje-choice__switch { border-color: GrayText; }\n  .lintje-choice__input:disabled:checked ~ .lintje-choice__radio::after,\n  .lintje-choice__input:disabled ~ .lintje-choice__switch .lintje-choice__knob { background: GrayText; }\n  .lintje-choice.is-disabled { color: GrayText; }\n}\n";
-//#endregion
-export { l as a, c as i, p as n, f as r, m as t };

package/dist-elements/tag/confirm-dialog.d.ts

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

package/dist-elements/tag/confirm-dialog.js

@@ -1,118 +0,0 @@
-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 { t as u } from "../chunks/confirm-dialog-D5EVGuil.js";
-//#region src/components/overlays/confirm-dialog/confirm-dialog.ts
-var d = class extends s {
-	constructor(...e) {
-		super(...e), this.open = !1, this.heading = "", this.confirmLabel = "Bevestigen", this.cancelLabel = "Annuleren", this.tone = "danger", this.busy = !1, this.#e = new i(this, r), this.#t = null, this.#n = new l(), this.#r = (e) => {
-			e.key === "Escape" && this.#n.isTopmost() && this.cancel("escape");
-		};
-	}
-	static {
-		this.styles = n(u);
-	}
-	static {
-		this.properties = {
-			open: {
-				type: Boolean,
-				reflect: !0
-			},
-			heading: { type: String },
-			confirmLabel: {
-				type: String,
-				attribute: "confirm-label"
-			},
-			cancelLabel: {
-				type: String,
-				attribute: "cancel-label"
-			},
-			actionLabel: {
-				type: String,
-				attribute: "action-label"
-			},
-			tone: {
-				type: String,
-				reflect: !0
-			},
-			busy: {
-				type: Boolean,
-				reflect: !0
-			}
-		};
-	}
-	#e;
-	#t;
-	#n;
-	#r;
-	cancel(e) {
-		this.busy || this.emit("lintje-close", { reason: e });
-	}
-	disconnectedCallback() {
-		this.#a(), super.disconnectedCallback();
-	}
-	updated(e) {
-		super.updated(e), this.open && !this.#t ? this.#i() : !this.open && this.#t && this.#a();
-	}
-	async #i() {
-		this.#t = a(), document.addEventListener("keydown", this.#r);
-		let e = this.renderRoot.querySelector(".lintje-confirm-dialog");
-		if (!e) return;
-		this.#n.activate(e, { focus: !1 });
-		let t = this.renderRoot.querySelector(".lintje-confirm-dialog__cancel");
-		t && (await t.updateComplete, this.open && this.#n.isTopmost() && c(t).focus());
-	}
-	#a() {
-		this.#t && (document.removeEventListener("keydown", this.#r), this.#t(), this.#t = null, this.#n.deactivate());
-	}
-	render() {
-		if (!this.open) return t;
-		let e = this.#e.matches;
-		return o`<div class="lintje-confirm-dialog__scrim" @click=${() => this.cancel("scrim")}>
-      <div
-        class="lintje-confirm-dialog"
-        role="alertdialog"
-        aria-modal="true"
-        aria-labelledby="lintje-confirm-dialog-heading"
-        aria-describedby="lintje-confirm-dialog-text"
-        tabindex="-1"
-        @click=${(e) => e.stopPropagation()}
-      >
-        <h2 id="lintje-confirm-dialog-heading" class="lintje-confirm-dialog__heading">
-          ${this.heading}
-        </h2>
-        <div id="lintje-confirm-dialog-text" class="lintje-confirm-dialog__text">
-          <slot></slot>
-        </div>
-        <div class="lintje-confirm-dialog__actions">
-          ${this.actionLabel ? o`<lintje-button
-                class="lintje-confirm-dialog__action"
-                variant="tertiary"
-                ?block=${e}
-                ?disabled=${this.busy}
-                @click=${() => this.emit("lintje-action")}
-                >${this.actionLabel}</lintje-button
-              >` : t}
-          <lintje-button
-            class="lintje-confirm-dialog__cancel"
-            variant="secondary"
-            ?block=${e}
-            ?disabled=${this.busy}
-            @click=${() => this.cancel("cancel")}
-            >${this.cancelLabel}</lintje-button
-          >
-          <lintje-button
-            class="lintje-confirm-dialog__confirm"
-            variant=${this.tone === "primary" ? "primary" : "danger"}
-            ?block=${e}
-            ?busy=${this.busy}
-            @click=${() => this.emit("lintje-confirm")}
-            >${this.confirmLabel}</lintje-button
-          >
-        </div>
-      </div>
-    </div>`;
-	}
-};
-e("lintje-confirm-dialog", d);
-//#endregion
-export { d as LintjeConfirmDialog };

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

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

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

@@ -1,184 +0,0 @@
-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
-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 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());
-		};
-	}
-	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 = a(), 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 o`<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", 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"
-        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(i - this.clock)}
-        </h2>
-        <div id="lintje-session-expiry-text" class="lintje-confirm-dialog__text">
-          ${r ? o`<slot name="expired"
-                  >Je sessie is verlopen. Meld je opnieuw aan; je komt terug op deze pagina.</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 ? o`<lintje-button
-                class="lintje-session-expiry__primary"
-                variant="primary"
-                ?block=${n}
-                @click=${() => this.emit("lintje-login")}
-                >Opnieuw aanmelden</lintje-button
-              >` : o`<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 o`${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/shortcuts.d.ts

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

package/dist-elements/tag/shortcuts.js

@@ -1,104 +0,0 @@
-import { Bt as e, Ct as t, Gt as n, Ht as r, Nt as i, St as a, qt as o, vt as s, wt as c, xt as l, yt as u, zt as d } from "../chunks/base-Bg-IFOPG.js";
-import { t as f } from "../chunks/focus-trap-9BnE-xWv.js";
-import { t as p } from "../chunks/key-CuuOw1KE.js";
-import "./toggle.js";
-import { t as m } from "../chunks/confirm-dialog-D5EVGuil.js";
-//#region src/components/frame/shortcuts/shortcuts.css?inline
-var h = "/* The frame is `confirm-dialog.css`. The host takes no space: a closed overview renders nothing. */\n:host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The window takes focus when it opens so Escape and the screen reader start there. */\n\n.lintje-shortcuts__list {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  margin: 0;\n  font: var(--text-ui);\n}\n.lintje-shortcuts__what,\n.lintje-shortcuts__keys {\n  margin: 0;\n  padding: var(--space-2) 0;\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-shortcuts__keys {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-1);\n  padding-left: var(--space-4);\n}\n.lintje-shortcuts__what:nth-last-of-type(1),\n.lintje-shortcuts__keys:nth-last-of-type(1) { border-bottom: 0; }\n\n/* The switch for the one-character keys, under the list. */\n.lintje-shortcuts__setting { display: block; margin-top: var(--space-4); }\n", g = class extends d {
-	constructor(...e) {
-		super(...e), this.open = !1, this.heading = "Sneltoetsen", this.list = [], this.characterKeys = !0, this.#e = null, this.#t = null, this.#n = new f(), this.#r = (e) => {
-			e.key === "Escape" && this.#n.isTopmost() && this.close("escape");
-		};
-	}
-	static {
-		this.styles = [
-			r(m),
-			r(p),
-			r(h)
-		];
-	}
-	static {
-		this.properties = {
-			open: {
-				type: Boolean,
-				reflect: !0
-			},
-			heading: { type: String },
-			list: { state: !0 },
-			characterKeys: { state: !0 }
-		};
-	}
-	#e;
-	#t;
-	#n;
-	#r;
-	connectedCallback() {
-		super.connectedCallback(), this.#e = a({
-			keys: "?",
-			description: "Dit overzicht",
-			handler: () => {
-				this.open || this.emit("lintje-open");
-			}
-		});
-	}
-	disconnectedCallback() {
-		this.#e?.(), this.#e = null, this.#a(), super.disconnectedCallback();
-	}
-	close(e) {
-		this.emit("lintje-close", { reason: e });
-	}
-	willUpdate(e) {
-		super.willUpdate(e), e.has("open") && this.open && (this.list = c(), this.characterKeys = s());
-	}
-	updated(e) {
-		super.updated(e), this.open && !this.#t ? this.#i() : !this.open && this.#t && this.#a();
-	}
-	#i() {
-		this.#t = i(), document.addEventListener("keydown", this.#r);
-		let e = this.renderRoot.querySelector(".lintje-confirm-dialog");
-		e && this.#n.activate(e);
-	}
-	#a() {
-		this.#t && (document.removeEventListener("keydown", this.#r), this.#t(), this.#t = null, this.#n.deactivate());
-	}
-	renderRow(e) {
-		return o`<dt class="lintje-shortcuts__what">${e.description}</dt>
-      <dd class="lintje-shortcuts__keys">
-        ${l(e.keys).map((e) => o`<kbd class="lintje-key">${e}</kbd>`)}
-      </dd>`;
-	}
-	onCharacterKeys(e) {
-		this.characterKeys = e.detail, t(e.detail);
-	}
-	renderSetting() {
-		return this.list.some((e) => u(e.keys)) ? o`<lintje-toggle
-      class="lintje-shortcuts__setting"
-      label="Sneltoetsen van één teken"
-      hint="Uit werken alleen de sneltoetsen met Ctrl, Alt of Cmd."
-      .checked=${this.characterKeys}
-      @lintje-change=${this.onCharacterKeys}
-    ></lintje-toggle>` : n;
-	}
-	render() {
-		return this.open ? o`<div class="lintje-confirm-dialog__scrim" @click=${() => this.close("scrim")}>
-      <div
-        class="lintje-confirm-dialog lintje-shortcuts"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="lintje-shortcuts-heading"
-        tabindex="-1"
-        @click=${(e) => e.stopPropagation()}
-      >
-        <h2 id="lintje-shortcuts-heading" class="lintje-confirm-dialog__heading">${this.heading}</h2>
-        <dl class="lintje-shortcuts__list">${this.list.map((e) => this.renderRow(e))}</dl>
-        ${this.renderSetting()}
-        <div class="lintje-confirm-dialog__actions">
-          <lintje-button variant="secondary" @click=${() => this.close("button")}>Sluiten</lintje-button>
-        </div>
-      </div>
-    </div>` : n;
-	}
-};
-e("lintje-shortcuts", g);
-//#endregion
-export { g as LintjeShortcuts };

package/dist-elements/types/components/frame/session-expiry/session-expiry.d.ts

@@ -1,55 +0,0 @@
-/**
- * `<lintje-session-expiry>` — the warning before the session runs out, the notice after it, and
- * the "Je concept is teruggezet" announcement (`restored-at`).
- *
- * The window is a `role="alertdialog"` in `<lintje-confirm-dialog>`'s frame (its stylesheet).
- * Escape and the scrim do nothing, because the session runs out either way. The element never
- * calls a server: the host sets `busy`, moves `expires-at` or sets `expired`.
- *
- * Events: `lintje-session-extend`, `lintje-logout`, `lintje-login`, `lintje-draft-discard`.
- */
-import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import { LintjeElement } from '../../../core/element.js';
-import '../../feedback/announcement/announcement.js';
-import '../../../primitives/button/button.js';
-export type SessionPhase = 'active' | 'warning' | 'expired';
-export type RestoredReason = 'logout' | 'reload';
-/** The shortest warning, in seconds: time to read the question and answer it. */
-export declare const MIN_WARNING = 20;
-/** Where the session stands at `now`. Without an `expiresAt` it is active, unless `expired`. */
-export declare function sessionPhase(expiresAt: number | null, now: number, warnBeforeSeconds: number, expired?: boolean): SessionPhase;
-export declare function warningTitle(remainingMs: number): string;
-/** "10:42", or null for a moment that does not parse. */
-export declare function clockTime(moment: string): string | null;
-export declare class LintjeSessionExpiry extends LintjeElement {
-    #private;
-    static styles: import("lit").CSSResult[];
-    static properties: PropertyDeclarations;
-    /** When the session ends, as an ISO moment. */
-    expiresAt?: string;
-    /** Seconds before the end that the warning opens; at least `MIN_WARNING`. */
-    warnBefore: number;
-    /** When the restored draft was saved; set, the announcement shows. */
-    restoredAt?: string;
-    /** Why the draft came back; it picks the announcement's words. */
-    restoredReason: RestoredReason;
-    busy: boolean;
-    /** The host's word that the session is gone (extending failed). */
-    expired: boolean;
-    /** The clock, read once a second while there is an `expires-at`. A test replaces it. */
-    now: () => number;
-    protected clock: number;
-    get phase(): SessionPhase;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected willUpdate(changed: PropertyValues<this>): void;
-    protected updated(changed: PropertyValues<this>): void;
-    private renderRestored;
-    private renderDialog;
-    protected render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lintje-session-expiry': LintjeSessionExpiry;
-    }
-}