@syware/jlib 0.6.0 → 0.7.0

package/dist/molecules/jl-combobox.js

@@ -4,6 +4,7 @@ import { jsonOf, oneOf } from "../lib/attributes.js";
 import { followAnchor } from "../lib/floating.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { keepInView } from "../lib/keep-in-view.js";
@@ -23,8 +24,6 @@ var ACTION_ICON_SIZE = 14;
 var CHECK_SIZE = 14;
 var NONE = -1;
 var PLACEMENT = "bottom-start";
-var VALUE_MISSING = "Choose an option.";
-var DEFAULT_EMPTY_TEXT = "No results";
 /** A JSON attribute that should hold a list of options; anything else gives none. */
 var parseOptions = (value) => {
 	const parsed = jsonOf([])(value);
@@ -57,7 +56,7 @@ var JlCombobox = class extends JlFormControl {
 	/** Shows a button that empties the field while it holds text. */
 	clearable = this.useChange(false, () => this.renderClear(), { attribute: "clearable" });
 	/** What the list says when no option matches. */
-	emptyText = this.useChange(DEFAULT_EMPTY_TEXT, (value) => {
+	emptyText = this.useChange(jlText("noResults"), (value) => {
 		this._refs.empty.textContent = value;
 	}, { attribute: "empty-text" });
 	required = this.useChange(false, (value) => {
@@ -112,7 +111,7 @@ var JlCombobox = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "action clear",
 					type: "button",
-					"aria-label": "Clear",
+					"aria-label": jlText("clear"),
 					tabIndex: -1,
 					hidden: true,
 					children: /* @__PURE__ */ jsx(JlIcon, {
@@ -123,7 +122,7 @@ var JlCombobox = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "action toggle",
 					type: "button",
-					"aria-label": "Show the options",
+					"aria-label": jlText("showOptions"),
 					tabIndex: -1,
 					children: /* @__PURE__ */ jsx(JlIcon, {
 						name: "chevron-down",
@@ -429,7 +428,7 @@ var JlCombobox = class extends JlFormControl {
 	}
 	renderValidity() {
 		if (this.required.get() && this.value.get() === "") {
-			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.native);
+			this.internals.setValidity({ valueMissing: true }, jlText("chooseOption"), this._refs.native);
 			return;
 		}
 		this.internals.setValidity({});

package/dist/molecules/jl-copy-button.js

@@ -3,6 +3,7 @@ import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
+import { jlText } from "../lib/texts.js";
 import { JlButton } from "../atoms/jl-button.js";
 import jl_copy_button_default from "./jl-copy-button.css_raw.js";
 import { css } from "@jadis/core";
@@ -28,12 +29,12 @@ var JlCopyButton = class extends JlElement {
 		parse: oneOf(CONTROL_SIZES, "sm")
 	});
 	_timer = { id: 0 };
-	_refs = this.useRefs((ref) => ({ button: ref("jl-button") }));
+	_refs = this.useRefs((ref) => ({ button: ref(JlButton) }));
 	templateHtml() {
 		return /* @__PURE__ */ jsx(JlButton, {
 			variant: "ghost",
 			icon: COPY_ICON,
-			hint: "Copy"
+			hint: jlText("copy")
 		});
 	}
 	templateCss() {
@@ -55,12 +56,12 @@ var JlCopyButton = class extends JlElement {
 	confirm() {
 		const button = this._refs.button;
 		button.icon.set(DONE_ICON);
-		button.hint.set("Copied");
+		button.hint.set(jlText("copied"));
 		this.reflect("copied", true);
 		window.clearTimeout(this._timer.id);
 		this._timer.id = window.setTimeout(() => {
 			button.icon.set(COPY_ICON);
-			button.hint.set("Copy");
+			button.hint.set(jlText("copy"));
 			this.reflect("copied", false);
 		}, CONFIRM_MS);
 	}

package/dist/molecules/jl-date-picker.js

@@ -4,6 +4,7 @@ import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { followAnchor } from "../lib/floating.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { NUMERIC_DATE, compareDates, dateOrder, datePattern, formatDate, isDateText, parseIsoDate, parseTypedDate, toIsoDate } from "../lib/calendar.js";
@@ -24,8 +25,6 @@ var PLACEMENT = "bottom-start";
 var MONDAY = 1;
 var SUNDAY = 0;
 var SATURDAY = 6;
-var VALUE_MISSING = "Choose a date.";
-var DIALOG_LABEL = "Choose a date";
 var parseWeekday = (value) => Math.round(clampedNumber(MONDAY, SUNDAY, SATURDAY)(value));
 /**
 * A field for a date: it shows the date in digits, in the `locale`'s order (`25.10.2026`, `10/25/2026`), and opens a
@@ -81,7 +80,7 @@ var JlDatePicker = class extends JlFormControl {
 		openOnPress: null
 	};
 	_refs = this.useRefs((ref) => ({
-		calendar: ref("jl-calendar"),
+		calendar: ref(JlCalendar),
 		clear: ref(".clear"),
 		control: ref(".control"),
 		native: ref("input"),
@@ -117,7 +116,7 @@ var JlDatePicker = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "action clear",
 					type: "button",
-					"aria-label": "Clear",
+					"aria-label": jlText("clear"),
 					tabIndex: -1,
 					hidden: true,
 					children: /* @__PURE__ */ jsx(JlIcon, {
@@ -128,7 +127,7 @@ var JlDatePicker = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "action open",
 					type: "button",
-					"aria-label": DIALOG_LABEL,
+					"aria-label": jlText("chooseDate"),
 					"aria-haspopup": "dialog",
 					"aria-expanded": "false",
 					"aria-controls": this._popupId,
@@ -143,7 +142,7 @@ var JlDatePicker = class extends JlFormControl {
 			id: this._popupId,
 			popover: "auto",
 			role: "dialog",
-			"aria-label": DIALOG_LABEL,
+			"aria-label": jlText("chooseDate"),
 			attrs: { part: "popup" },
 			children: /* @__PURE__ */ jsx(JlCalendar, { class: "calendar" })
 		})] });
@@ -314,7 +313,7 @@ var JlDatePicker = class extends JlFormControl {
 	}
 	renderMissing(anchor) {
 		if (this.required.get()) {
-			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, anchor);
+			this.internals.setValidity({ valueMissing: true }, jlText("chooseDateMissing"), anchor);
 			return;
 		}
 		this.internals.setValidity({});

package/dist/molecules/jl-empty.js

@@ -43,7 +43,7 @@ var JlEmpty = class extends JlElement {
 		actions: ref(".actions"),
 		description: ref(".description"),
 		heading: ref(".heading"),
-		icon: ref("jl-icon"),
+		icon: ref(JlIcon),
 		medallion: ref(".medallion"),
 		slot: ref("slot")
 	}));

package/dist/molecules/jl-facts.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-facts.css?raw
+var jl_facts_default = ":host {\n  display: block;\n  container-type: inline-size;\n}\n\n:host([empty]) {\n  display: none;\n}\n\n.facts {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 6px 24px;\n  margin: 0;\n  font-size: var(--jl-font-md);\n}\n\n/* Each pair is a row of the grid: the labels line up in one column, the values in the other. */\n.fact {\n  display: contents;\n}\n\ndt {\n  color: var(--jl-muted);\n}\n\ndd {\n  min-width: 0;\n  margin: 0;\n  color: var(--jl-text);\n  overflow-wrap: anywhere;\n}\n\ncode {\n  font-family: var(--jl-font-mono);\n  font-size: var(--jl-font-sm);\n  word-break: break-all;\n}\n\na {\n  color: var(--jl-accent);\n  text-decoration: none;\n}\n\na:hover {\n  color: var(--jl-accent-strong);\n  text-decoration: underline;\n}\n\n:host([orientation=\"vertical\"]) .facts {\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));\n  gap: 16px 24px;\n}\n\n:host([orientation=\"vertical\"]) .fact {\n  display: grid;\n  gap: 2px;\n  align-content: start;\n}\n\n@container (width < 420px) {\n  .facts {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 12px;\n  }\n\n  .fact {\n    display: grid;\n    gap: 2px;\n  }\n}\n";
+export { jl_facts_default as default };

package/dist/molecules/jl-facts.d.ts

@@ -0,0 +1,35 @@
+import { JlElement } from '../base/jl-element';
+import type { Fact, FactRenderer, FactsOrientation } from '../types/jl-facts.types';
+export declare const FACTS_ORIENTATIONS: readonly FactsOrientation[];
+/**
+ * The facts about one thing, label and value: an object's size and digest, an order's customer and date. Facts
+ * without a value are left out, and an element with none takes no room. Values can be code (monospace, broken
+ * anywhere), links, or drawn by code (`renderers`, by a fact's `key`). Narrower than 420 pixels, labels go over
+ * their values.
+ */
+export declare class JlFacts extends JlElement {
+    static readonly selector = "jl-facts";
+    readonly items: Readonly<Readonly<{
+        get(): Fact[];
+        set(setter: Fact[] | ((prevState: Fact[]) => Fact[])): void;
+    }>>;
+    readonly orientation: Readonly<Readonly<{
+        get(): FactsOrientation;
+        set(setter: ((prevState: FactsOrientation) => FactsOrientation) | FactsOrientation): void;
+    }>>;
+    /** Draws the values of some facts by code, by their `key`: `{ type: (fact) => <JlBadge label={…} /> }`. */
+    readonly renderers: Readonly<Readonly<{
+        get(): Record<string, FactRenderer>;
+        set(setter: Record<string, FactRenderer> | ((prevState: Record<string, FactRenderer>) => Record<string, FactRenderer>)): void;
+    }>>;
+    /** The list's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    private render;
+    private valueNode;
+}

package/dist/molecules/jl-facts.js

@@ -0,0 +1,64 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf, oneOf } from "../lib/attributes.js";
+import { setOrRemove } from "../lib/dom.js";
+import jl_facts_default from "./jl-facts.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-facts.tsx
+var FACTS_ORIENTATIONS = ["horizontal", "vertical"];
+var hasValue = (fact) => fact.value !== null && fact.value !== void 0 && fact.value !== "";
+/**
+* The facts about one thing, label and value: an object's size and digest, an order's customer and date. Facts
+* without a value are left out, and an element with none takes no room. Values can be code (monospace, broken
+* anywhere), links, or drawn by code (`renderers`, by a fact's `key`). Narrower than 420 pixels, labels go over
+* their values.
+*/
+var JlFacts = class extends JlElement {
+	static selector = "jl-facts";
+	items = this.useChange([], () => this.render(), {
+		attribute: "items",
+		parse: jsonOf([])
+	});
+	orientation = this.useChange("horizontal", (value) => this.reflect("orientation", value), {
+		attribute: "orientation",
+		parse: oneOf(FACTS_ORIENTATIONS, "horizontal")
+	});
+	/** Draws the values of some facts by code, by their `key`: `{ type: (fact) => <JlBadge label={…} /> }`. */
+	renderers = this.useChange({}, () => this.render());
+	/** The list's name for screen readers. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.list, "aria-label", value), { attribute: "label" });
+	_refs = this.useRefs((ref) => ({ list: ref("dl") }));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("dl", {
+			class: "facts",
+			attrs: { part: "base" }
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_facts_default}`;
+	}
+	render() {
+		const shown = this.items.get().filter(hasValue);
+		this._refs.list.replaceChildren(...shown.map((fact) => /* @__PURE__ */ jsxs("div", {
+			class: "fact",
+			children: [/* @__PURE__ */ jsx("dt", { children: fact.label }), /* @__PURE__ */ jsx("dd", {
+				title: fact.hint,
+				children: this.valueNode(fact)
+			})]
+		})));
+		this.reflect("empty", shown.length === 0);
+	}
+	valueNode(fact) {
+		const renderer = fact.key === void 0 ? void 0 : this.renderers.get()[fact.key];
+		if (renderer !== void 0) return renderer(fact);
+		const text = String(fact.value);
+		const content = fact.code ? /* @__PURE__ */ jsx("code", { children: text }) : document.createTextNode(text);
+		return fact.href === void 0 ? content : /* @__PURE__ */ jsx("a", {
+			href: fact.href,
+			children: content
+		});
+	}
+};
+JlFacts.register();
+export { FACTS_ORIENTATIONS, JlFacts };

package/dist/molecules/jl-file-drop.d.ts

@@ -61,6 +61,11 @@ export declare class JlFileDrop extends JlFormControl {
     focus(options?: FocusOptions): void;
     /** Opens the file chooser. */
     browse(): void;
+    /**
+     * Takes files as a drop would, such as files dropped elsewhere on the page: the ones it accepts join the list (or
+     * replace the file there) and fire `change`, the others say why not.
+     */
+    add(files: readonly File[]): void;
     /** Takes every file back, and empties the list of refused ones. */
     clear(): void;
     templateHtml(): Node;

package/dist/molecules/jl-file-drop.js

@@ -3,6 +3,7 @@ import { JlFormControl } from "../base/jl-form-control.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { pageLocale } from "../lib/locale.js";
@@ -30,15 +31,10 @@ var ALERT_ICON_SIZE = 14;
 var NO_LIMIT = 0;
 var FILES_TYPE = "Files";
 var IMAGE_FAMILY = "image/";
-var VALUE_MISSING = "Choose a file.";
-var DEFAULT_TEXT = {
-	multiple: "Drop files here",
-	single: "Drop a file here"
-};
 var REASONS = {
-	count: () => "is one too many: the field takes a single file",
-	size: (rules) => `is larger than ${formatFileSize(rules.maxSize, pageLocale())}`,
-	type: (rules) => `is not an accepted type (${describeAccept(rules.accept)})`
+	count: () => jlText("fileTooMany"),
+	size: (rules) => jlText("fileTooLarge", { size: formatFileSize(rules.maxSize, pageLocale()) }),
+	type: (rules) => jlText("fileWrongType", { types: describeAccept(rules.accept) })
 };
 var hasFiles = (event) => event.dataTransfer?.types.includes(FILES_TYPE) ?? false;
 /**
@@ -114,6 +110,13 @@ var JlFileDrop = class extends JlFormControl {
 			if (!this.disabled.get()) this._refs.picker.click();
 		});
 	}
+	/**
+	* Takes files as a drop would, such as files dropped elsewhere on the page: the ones it accepts join the list (or
+	* replace the file there) and fire `change`, the others say why not.
+	*/
+	add(files) {
+		this.whenRendered(() => this.take([...files]));
+	}
 	/** Takes every file back, and empties the list of refused ones. */
 	clear() {
 		this.whenRendered(() => {
@@ -148,7 +151,7 @@ var JlFileDrop = class extends JlFormControl {
 						class: "browse",
 						type: "button",
 						"aria-describedby": this._ids.hint,
-						children: "Browse"
+						children: jlText("browse")
 					})
 				]
 			}),
@@ -165,7 +168,7 @@ var JlFileDrop = class extends JlFormControl {
 			}),
 			/* @__PURE__ */ jsx("ul", {
 				class: "files",
-				"aria-label": "Chosen files",
+				"aria-label": jlText("chosenFiles"),
 				hidden: true
 			})
 		] });
@@ -297,7 +300,7 @@ var JlFileDrop = class extends JlFormControl {
 				editable ? /* @__PURE__ */ jsx("button", {
 					class: "file-remove",
 					type: "button",
-					"aria-label": `Remove ${file.name}`,
+					"aria-label": jlText("removeNamed", { name: file.name }),
 					"data-index": String(index),
 					children: /* @__PURE__ */ jsx(JlIcon, {
 						name: "x",
@@ -327,14 +330,14 @@ var JlFileDrop = class extends JlFormControl {
 	}
 	renderText() {
 		const text = this.text.get();
-		const fallback = this.multiple.get() ? DEFAULT_TEXT.multiple : DEFAULT_TEXT.single;
+		const fallback = jlText(this.multiple.get() ? "dropFiles" : "dropFile");
 		this._refs.text.textContent = text === "" ? fallback : text;
 	}
 	/** What it takes, under the text: `PNG, JPG · up to 5 MB`. */
 	renderHint() {
 		const types = describeAccept(this.accept.get());
 		const maxSize = this.maxSize.get();
-		const hint = [types, maxSize === NO_LIMIT ? "" : `up to ${formatFileSize(maxSize, pageLocale())}`].filter((part) => part !== "").join(" · ");
+		const hint = [types, maxSize === NO_LIMIT ? "" : jlText("fileUpTo", { size: formatFileSize(maxSize, pageLocale()) })].filter((part) => part !== "").join(" · ");
 		this._refs.hint.textContent = hint;
 		this._refs.hint.hidden = hint === "";
 	}
@@ -351,7 +354,7 @@ var JlFileDrop = class extends JlFormControl {
 	}
 	renderValidity() {
 		if (this.required.get() && this._state.files.length === 0) {
-			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.browse);
+			this.internals.setValidity({ valueMissing: true }, jlText("chooseFile"), this._refs.browse);
 			return;
 		}
 		this.internals.setValidity({});

package/dist/molecules/jl-input-list.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-input-list.css?raw
+var jl_input_list_default = ":host {\n  display: block;\n}\n\n.list,\n.rows {\n  display: grid;\n  gap: var(--jl-space-2);\n}\n\n.row {\n  display: flex;\n  align-items: start;\n  gap: var(--jl-space-1);\n}\n\n.row > :first-child {\n  flex: 1;\n  min-width: 0;\n}\n\n[hidden] {\n  display: none;\n}\n";
+export { jl_input_list_default as default };

package/dist/molecules/jl-input-list.d.ts

@@ -0,0 +1,79 @@
+import { JlElement } from '../base/jl-element';
+import type { InputType } from '../types/jl-input.types';
+import type { SelectOption } from '../types/jl-select.types';
+/**
+ * A field with several values, each in its own row: typed in an input (or a text area when `multiline`), or picked
+ * from `options`. People add a row and remove one; `max` caps how many. `values` holds those filled in, in their
+ * order, and `change` fires with them. Put it in a `jl-field` for its label, hint and error.
+ */
+export declare class JlInputList extends JlElement {
+    static readonly selector = "jl-input-list";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string[];
+    }>>;
+    /** The values filled in, in their order; rows left empty are not among them. */
+    readonly values: Readonly<Readonly<{
+        get(): string[];
+        set(setter: string[] | ((prevState: string[]) => string[])): void;
+    }>>;
+    /** The input of each row: text, a number, a date, a link… */
+    readonly type: Readonly<Readonly<{
+        get(): InputType;
+        set(setter: ((prevState: InputType) => InputType) | InputType): void;
+    }>>;
+    /** Each value on several lines, in a text area. */
+    readonly multiline: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The values to pick from, each row a select; none lets people type. */
+    readonly options: Readonly<Readonly<{
+        get(): SelectOption[];
+        set(setter: SelectOption[] | ((prevState: SelectOption[]) => SelectOption[])): void;
+    }>>;
+    /** How many values it takes at most; 0 takes any number. */
+    readonly max: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly placeholder: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The name of each row for screen readers: the field's label. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The add button's text. */
+    readonly addLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The text a screen reader says for each row's remove button. */
+    readonly removeLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _state;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** Values set from outside start the rows again; those the rows themselves gave change nothing. */
+    private follow;
+    private renderRows;
+    private renderAdd;
+    private renderDisabled;
+    private row;
+    /** The control of a row: a select among the options, a text area, or an input of the type; `onInput` hears it. */
+    private control;
+    private change;
+    private addRow;
+    private removeRow;
+    private publish;
+}

package/dist/molecules/jl-input-list.js

@@ -0,0 +1,177 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber, jsonOf, oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { jlText } from "../lib/texts.js";
+import { JlButton } from "../atoms/jl-button.js";
+import { INPUT_TYPES, JlInput } from "../atoms/jl-input.js";
+import { JlSelect } from "../atoms/jl-select.js";
+import { JlTextarea } from "../atoms/jl-textarea.js";
+import { canAddRow, filledValues, rowsOf, sameValues, withRowAt, withoutRowAt } from "../lib/input-list.js";
+import jl_input_list_default from "./jl-input-list.css_raw.js";
+import { css } from "@jadis/core";
+import { Plus, X } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-input-list.tsx
+registerIcons({
+	plus: Plus,
+	x: X
+});
+var NO_LIMIT = 0;
+var MAX_LIMIT = 1e3;
+/**
+* A field with several values, each in its own row: typed in an input (or a text area when `multiline`), or picked
+* from `options`. People add a row and remove one; `max` caps how many. `values` holds those filled in, in their
+* order, and `change` fires with them. Put it in a `jl-field` for its label, hint and error.
+*/
+var JlInputList = class extends JlElement {
+	static selector = "jl-input-list";
+	events = this.useEvents();
+	/** The values filled in, in their order; rows left empty are not among them. */
+	values = this.useChange([], (values) => this.follow(values), {
+		attribute: "values",
+		parse: jsonOf([])
+	});
+	/** The input of each row: text, a number, a date, a link… */
+	type = this.useChange("text", () => this.renderRows(), {
+		attribute: "type",
+		parse: oneOf(INPUT_TYPES, "text")
+	});
+	/** Each value on several lines, in a text area. */
+	multiline = this.useChange(false, () => this.renderRows(), { attribute: "multiline" });
+	/** The values to pick from, each row a select; none lets people type. */
+	options = this.useChange([], () => this.renderRows(), {
+		attribute: "options",
+		parse: jsonOf([])
+	});
+	/** How many values it takes at most; 0 takes any number. */
+	max = this.useChange(NO_LIMIT, () => this.renderAdd(), {
+		attribute: "max",
+		parse: clampedNumber(NO_LIMIT, NO_LIMIT, MAX_LIMIT)
+	});
+	placeholder = this.useChange("", () => this.renderRows(), { attribute: "placeholder" });
+	/** The name of each row for screen readers: the field's label. */
+	label = this.useChange("", () => this.renderRows(), { attribute: "label" });
+	disabled = this.useChange(false, (value) => this.renderDisabled(value), { attribute: "disabled" });
+	/** The add button's text. */
+	addLabel = this.useChange(jlText("addValue"), () => this.renderAdd(), { attribute: "add-label" });
+	/** The text a screen reader says for each row's remove button. */
+	removeLabel = this.useChange(jlText("removeValue"), () => this.renderRows(), { attribute: "remove-label" });
+	_state = { rows: [""] };
+	_refs = this.useRefs((ref) => ({
+		add: ref(".add"),
+		rows: ref(".rows")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "list",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("div", { class: "rows" }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(JlButton, {
+				class: "add",
+				variant: "ghost",
+				size: "sm",
+				icon: "plus"
+			}) })]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_input_list_default}`;
+	}
+	onConnect() {
+		this._refs.add.events.register("press", () => this.addRow());
+	}
+	/** Values set from outside start the rows again; those the rows themselves gave change nothing. */
+	follow(values) {
+		if (sameValues(values, filledValues(this._state.rows))) return;
+		this._state.rows = rowsOf(values);
+		this.renderRows();
+	}
+	renderRows() {
+		this._refs.rows.replaceChildren(...this._state.rows.map((value, index) => this.row(value, index)));
+		this.renderAdd();
+	}
+	renderAdd() {
+		const add = this._refs.add;
+		add.label.set(this.addLabel.get());
+		add.hidden = this.disabled.get() || !canAddRow(this._state.rows.length, this.max.get());
+	}
+	renderDisabled(disabled) {
+		this.reflect("disabled", disabled);
+		this.renderRows();
+	}
+	row(value, index) {
+		const control = this.control(value, (text) => this.change(index, text));
+		const remove = /* @__PURE__ */ jsx(JlButton, {
+			class: "remove",
+			variant: "ghost",
+			size: "sm",
+			icon: "x",
+			hint: this.removeLabel.get()
+		});
+		remove.events.register("press", () => this.removeRow(index));
+		remove.hidden = this.disabled.get() || this._state.rows.length === 1;
+		return /* @__PURE__ */ jsxs("div", {
+			class: "row",
+			children: [control, remove]
+		});
+	}
+	/** The control of a row: a select among the options, a text area, or an input of the type; `onInput` hears it. */
+	control(value, onInput) {
+		const label = this.label.get();
+		const disabled = this.disabled.get();
+		const options = this.options.get();
+		if (options.length > 0) {
+			const select = /* @__PURE__ */ jsx(JlSelect, {
+				label,
+				options,
+				disabled
+			});
+			select.value.set(value);
+			select.events.register("change", onInput);
+			return select;
+		}
+		if (this.multiline.get()) {
+			const area = /* @__PURE__ */ jsx(JlTextarea, {
+				label,
+				value,
+				placeholder: this.placeholder.get(),
+				disabled,
+				autosize: true
+			});
+			area.events.register("input", onInput);
+			return area;
+		}
+		const input = /* @__PURE__ */ jsx(JlInput, {
+			label,
+			value,
+			type: this.type.get(),
+			placeholder: this.placeholder.get(),
+			disabled
+		});
+		input.events.register("input", onInput);
+		return input;
+	}
+	change(index, text) {
+		this._state.rows = withRowAt(this._state.rows, index, text);
+		this.publish();
+	}
+	addRow() {
+		if (!canAddRow(this._state.rows.length, this.max.get())) return;
+		this._state.rows = [...this._state.rows, ""];
+		this.renderRows();
+		const added = this._refs.rows.lastElementChild?.firstElementChild;
+		if (added instanceof HTMLElement) added.focus();
+	}
+	removeRow(index) {
+		this._state.rows = withoutRowAt(this._state.rows, index);
+		this.renderRows();
+		this.publish();
+	}
+	publish() {
+		const values = filledValues(this._state.rows);
+		this.values.set(values);
+		this.events.emit("change", values);
+	}
+};
+JlInputList.register();
+export { JlInputList };

package/dist/molecules/jl-load-more.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-load-more.css?raw
+var jl_load_more_default = ":host {\n  display: block;\n}\n\n:host([complete]) {\n  display: none;\n}\n\n.more {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 0;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n}\n";
+export { jl_load_more_default as default };