lintje 0.1.1 → 0.3.0

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

@@ -1,195 +0,0 @@
-import { Gt as e, Kt as t, O as n, Z as r, et as i } from "./base-rBLTcEIv.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(n, r, a, o = !0) {
-	return r ? t`<span id=${a.errorId} class="lintje-field__error" role=${o ? "alert" : e}
-      >${i("functioneel-waarschuwing", { size: 14 })}${r}</span
-    >` : n ? t`<span id=${a.hintId} class="lintje-field__hint">${n}</span>` : e;
-}
-//#endregion
-//#region src/components/inputs/shared/input.ts
-var u = "(niet verplicht)", d = "afwijkend van standaard", f = class extends n {
-	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(n, i = e) {
-		let a = () => this.focusControl();
-		if (this.hideLabel) {
-			let e = this.renderLabelSuffix();
-			return n ? t`<label id=${this.labelId} for=${n} class="visually-hidden">${this.label} ${e}</label>` : t`<span id=${this.labelId} class="visually-hidden" @click=${a}>${this.label} ${e}</span>`;
-		}
-		let o = r({
-			"lintje-label": !0,
-			"is-modified": this.modified
-		}), s = this.modified ? t`<span class="lintje-label__dot"><span class="visually-hidden">${d}</span></span>` : e, c = this.renderLabelSuffix();
-		return n ? t`<label id=${this.labelId} for=${n} class=${o}>${this.label} ${c} ${s} ${i}</label>` : t`<span id=${this.labelId} class=${o} @click=${a}>${this.label} ${c} ${s} ${i}</span>`;
-	}
-	renderLabelSuffix() {
-		return this.isOptional ? t`<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 : t`${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/chart-tile.d.ts

@@ -1 +0,0 @@
-export * from '../types/components/charts/chart-tile/chart-tile.js'