@syware/jlib 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,49 @@
+import { JlElement } from '../base/jl-element';
+import type { FieldOrientation } from '../types/jl-field.types';
+export declare const FIELD_ORIENTATIONS: readonly FieldOrientation[];
+/**
+ * A control with its label, a hint under it, and an error that replaces the hint. Pressing the label focuses the
+ * control; an `error` draws the control as invalid. The control goes in the default slot.
+ */
+export declare class JlField extends JlElement {
+    static readonly selector = "jl-field";
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Help under the control, hidden while there is an error. */
+    readonly hint: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** What is wrong with the value, in the danger colour; the control is drawn as invalid meanwhile. */
+    readonly error: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Adds an asterisk to the label. Set `required` on the control too, for the form to check it. */
+    readonly required: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly orientation: Readonly<Readonly<{
+        get(): FieldOrientation;
+        set(setter: ((prevState: FieldOrientation) => FieldOrientation) | FieldOrientation): void;
+    }>>;
+    private readonly _state;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** The control in the slot: the first element the page put there. */
+    private control;
+    private focusControl;
+    private renderMessages;
+    private syncControl;
+    /** Names the control for screen readers with the field's label, unless it has a label of its own. */
+    private syncLabel;
+    /** Marks the control invalid, remembering it unless the page had marked it already. */
+    private invalidate;
+    /** Marks the control invalid while there is an error, and clears only what the field itself marked. */
+    private syncInvalid;
+}

package/dist/molecules/jl-field.js

@@ -0,0 +1,147 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import jl_field_default from "./jl-field.css_raw.js";
+import { css } from "@jadis/core";
+import { CircleAlert } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-field.tsx
+registerIcons({ "circle-alert": CircleAlert });
+var FIELD_ORIENTATIONS = ["vertical", "horizontal"];
+var ERROR_ICON_SIZE = 14;
+var VISIBLE_LABEL_TAGS = ["jl-checkbox", "jl-switch"];
+function inputOf(element, name) {
+	const candidate = Reflect.get(element, name);
+	return typeof candidate === "object" && candidate !== null && typeof Reflect.get(candidate, "set") === "function" ? candidate : null;
+}
+/**
+* A control with its label, a hint under it, and an error that replaces the hint. Pressing the label focuses the
+* control; an `error` draws the control as invalid. The control goes in the default slot.
+*/
+var JlField = class extends JlElement {
+	static selector = "jl-field";
+	label = this.useChange("", (value) => {
+		this._refs.label.textContent = value;
+		this._refs.labelRow.hidden = value === "";
+		this.syncControl();
+	}, { attribute: "label" });
+	/** Help under the control, hidden while there is an error. */
+	hint = this.useChange("", () => this.renderMessages(), { attribute: "hint" });
+	/** What is wrong with the value, in the danger colour; the control is drawn as invalid meanwhile. */
+	error = this.useChange("", () => {
+		this.renderMessages();
+		this.syncControl();
+	}, { attribute: "error" });
+	/** Adds an asterisk to the label. Set `required` on the control too, for the form to check it. */
+	required = this.useChange(false, (value) => {
+		this._refs.asterisk.hidden = !value;
+	}, { attribute: "required" });
+	orientation = this.useChange("vertical", (value) => this.reflect("orientation", value), {
+		attribute: "orientation",
+		parse: oneOf(FIELD_ORIENTATIONS, "vertical")
+	});
+	_state = { invalidated: null };
+	_refs = this.useRefs((ref) => ({
+		asterisk: ref(".asterisk"),
+		errorRegion: ref(".error-region"),
+		hint: ref(".hint"),
+		label: ref(".label"),
+		labelRow: ref(".label-row"),
+		slot: ref("slot")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "field",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("div", {
+				class: "label-row",
+				hidden: true,
+				children: [/* @__PURE__ */ jsx("span", { class: "label" }), /* @__PURE__ */ jsx("span", {
+					class: "asterisk",
+					"aria-hidden": "true",
+					hidden: true,
+					children: "*"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				class: "body",
+				children: [
+					/* @__PURE__ */ jsx("slot", {}),
+					/* @__PURE__ */ jsx("p", {
+						class: "hint",
+						hidden: true
+					}),
+					/* @__PURE__ */ jsx("div", {
+						class: "error-region",
+						"aria-live": "polite"
+					})
+				]
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_field_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.labelRow, "click", () => this.focusControl());
+		this.syncControl();
+		this.on(this._refs.slot, "slotchange", () => this.syncControl());
+	}
+	/** The control in the slot: the first element the page put there. */
+	control() {
+		const [first] = this._refs.slot.assignedElements({ flatten: true });
+		return first instanceof HTMLElement ? first : null;
+	}
+	focusControl() {
+		this.control()?.focus();
+	}
+	renderMessages() {
+		const error = this.error.get();
+		const hint = this.hint.get();
+		this._refs.hint.textContent = hint;
+		this._refs.hint.hidden = hint === "" || error !== "";
+		this.reflect("has-error", error !== "");
+		this._refs.errorRegion.replaceChildren(...error === "" ? [] : [/* @__PURE__ */ jsxs("p", {
+			class: "error",
+			children: [/* @__PURE__ */ jsx(JlIcon, {
+				name: "circle-alert",
+				size: ERROR_ICON_SIZE
+			}), /* @__PURE__ */ jsx("span", { children: error })]
+		})]);
+	}
+	syncControl() {
+		const control = this.control();
+		if (control === null) return;
+		this.syncLabel(control);
+		this.syncInvalid(control);
+	}
+	/** Names the control for screen readers with the field's label, unless it has a label of its own. */
+	syncLabel(control) {
+		const input = inputOf(control, "label");
+		const ownLabel = control.hasAttribute("label") || VISIBLE_LABEL_TAGS.includes(control.localName);
+		if (input === null || ownLabel) return;
+		input.set(this.label.get());
+	}
+	/** Marks the control invalid, remembering it unless the page had marked it already. */
+	invalidate(control, input) {
+		if (input.get()) return;
+		input.set(true);
+		this._state.invalidated = control;
+	}
+	/** Marks the control invalid while there is an error, and clears only what the field itself marked. */
+	syncInvalid(control) {
+		const input = inputOf(control, "invalid");
+		if (input === null) return;
+		if (this.error.get() !== "") {
+			this.invalidate(control, input);
+			return;
+		}
+		if (this._state.invalidated === control) {
+			input.set(false);
+			this._state.invalidated = null;
+		}
+	}
+};
+JlField.register();
+export { FIELD_ORIENTATIONS, JlField };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-file-drop.css?raw
+var jl_file_drop_default = ":host {\n  display: block;\n  /* As a grid or flex item, the field may be narrower than its text field would like. */\n  min-width: 0;\n  --pad: 24px;\n  --badge: 44px;\n}\n\n:host([size=\"sm\"]) {\n  --pad: 14px;\n  --badge: 34px;\n}\n\n:host([size=\"lg\"]) {\n  --pad: 36px;\n  --badge: 52px;\n}\n\n.zone {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  padding: var(--pad);\n  border: 1.5px dashed var(--jl-line-strong);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  text-align: center;\n  cursor: pointer;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    background var(--jl-fast) var(--jl-ease);\n}\n\n.zone:hover {\n  border-color: color-mix(in srgb, var(--jl-line-strong) 60%, var(--jl-text) 18%);\n  background: var(--jl-surface-2);\n}\n\n:host([dragging]) .zone {\n  border-color: var(--jl-accent);\n  background: var(--jl-accent-soft);\n}\n\n:host([invalid]) .zone {\n  border-color: var(--jl-danger);\n}\n\n:host([disabled]) .zone {\n  border-color: var(--jl-line-strong);\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  cursor: not-allowed;\n}\n\n.zone-icon {\n  align-items: center;\n  justify-content: center;\n  width: var(--badge);\n  height: var(--badge);\n  margin-bottom: 6px;\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface-3);\n  color: var(--jl-muted);\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n:host([dragging]) .zone-icon {\n  background: var(--jl-surface);\n  color: var(--jl-accent);\n}\n\n.text {\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n:host([size=\"sm\"]) .text {\n  font-size: var(--jl-font-sm);\n}\n\n.hint {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  line-height: 1.4;\n}\n\n.browse {\n  display: inline-flex;\n  align-items: center;\n  height: var(--jl-control-sm);\n  margin-top: 8px;\n  padding: 0 12px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n  cursor: pointer;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n.browse:hover {\n  background: var(--jl-surface-3);\n}\n\n.browse:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.refused,\n.files {\n  margin: 8px 0 0;\n  padding: 0;\n  list-style: none;\n}\n\n.refused {\n  display: grid;\n  gap: 4px;\n  color: var(--jl-danger);\n  font-size: var(--jl-font-sm);\n  line-height: 1.45;\n}\n\n.refusal {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n}\n\n.refusal jl-icon {\n  margin-top: 3px;\n}\n\n.refused-name {\n  font-weight: 600;\n  overflow-wrap: anywhere;\n}\n\n.files {\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n}\n\n.file {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 40px;\n  padding: 6px 8px 6px 12px;\n}\n\n.file + .file {\n  border-top: 1px solid var(--jl-line);\n}\n\n.file-icon {\n  color: var(--jl-faint);\n}\n\n.file-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  font-size: var(--jl-font-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-size {\n  color: var(--jl-muted);\n  font-family: var(--jl-font-mono);\n  font-size: var(--jl-font-xs);\n  white-space: nowrap;\n}\n\n.file-remove {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.file-remove:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n/* \"images, PDF · up to 5 MB\": the hint starts with a capital. */\n.hint::first-letter {\n  text-transform: uppercase;\n}\n";
+export { jl_file_drop_default as default };

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

@@ -0,0 +1,93 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A zone to drop files on, with a button that opens the file chooser. The chosen files are listed under it with
+ * their size and a button to take each one back; refused files are listed with the reason. The form gets the
+ * files under the field's name, as from a native file input.
+ */
+export declare class JlFileDrop extends JlFormControl {
+    static readonly selector = "jl-file-drop";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: File[];
+    }>>;
+    /** The types it takes, as a native file input's `accept`: `image/*,.pdf`. */
+    readonly accept: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Takes several files; otherwise a new file replaces the one there. */
+    readonly multiple: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The largest file it takes, in bytes; 0 for no limit. */
+    readonly maxSize: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The text in the zone; by default it says to drop a file, or files. */
+    readonly text: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The name of the zone for screen readers, when its text is not enough. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly required: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Draws the zone in the danger colour, for an error the page found itself. */
+    readonly invalid: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    private readonly _ids;
+    private readonly _state;
+    private readonly _nameWatch;
+    private readonly _refs;
+    /** The files chosen, in the order they came. */
+    get files(): File[];
+    focus(options?: FocusOptions): void;
+    /** Opens the file chooser. */
+    browse(): void;
+    /** Takes every file back, and empties the list of refused ones. */
+    clear(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    protected resetValue(): void;
+    protected setDisabledByForm(disabled: boolean): void;
+    private canDrop;
+    private onDragEnter;
+    private onDragOver;
+    private onDragLeave;
+    private onDrop;
+    private onPicked;
+    private onFilesClick;
+    private focusAfterRemoval;
+    private rules;
+    /** Files dropped or picked: the good ones join the list (or replace the file there), the others say why not. */
+    private take;
+    private setFiles;
+    private renderFiles;
+    private renderRefused;
+    private renderText;
+    /** What it takes, under the text: `PNG, JPG · up to 5 MB`. */
+    private renderHint;
+    /** Each file is its own entry under the field's name, as from a native file input. */
+    private renderFormValue;
+    private renderValidity;
+    private renderDisabled;
+}

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

@@ -0,0 +1,366 @@
+import { BASE_STYLES } from "../styles/shared.js";
+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 { setOrRemove, uniqueId } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { pageLocale } from "../lib/locale.js";
+import { checkFiles, describeAccept, formatFileSize, isSameFile } from "../lib/files.js";
+import jl_file_drop_default from "./jl-file-drop.css_raw.js";
+import { css } from "@jadis/core";
+import { CircleAlert, File, Image, Upload, X } from "lucide";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-file-drop.tsx
+registerIcons({
+	"circle-alert": CircleAlert,
+	file: File,
+	image: Image,
+	upload: Upload,
+	x: X
+});
+var ZONE_ICON_SIZES = {
+	lg: 26,
+	md: 22,
+	sm: 18
+};
+var FILE_ICON_SIZE = 16;
+var REMOVE_ICON_SIZE = 14;
+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)})`
+};
+var hasFiles = (event) => event.dataTransfer?.types.includes(FILES_TYPE) ?? false;
+/**
+* A zone to drop files on, with a button that opens the file chooser. The chosen files are listed under it with
+* their size and a button to take each one back; refused files are listed with the reason. The form gets the
+* files under the field's name, as from a native file input.
+*/
+var JlFileDrop = class extends JlFormControl {
+	static selector = "jl-file-drop";
+	events = this.useEvents();
+	/** The types it takes, as a native file input's `accept`: `image/*,.pdf`. */
+	accept = this.useChange("", (value) => {
+		this._refs.picker.accept = value;
+		this.renderHint();
+	}, { attribute: "accept" });
+	/** Takes several files; otherwise a new file replaces the one there. */
+	multiple = this.useChange(false, (value) => {
+		this._refs.picker.multiple = value;
+		this.renderText();
+	}, { attribute: "multiple" });
+	/** The largest file it takes, in bytes; 0 for no limit. */
+	maxSize = this.useChange(NO_LIMIT, () => this.renderHint(), {
+		attribute: "max-size",
+		parse: clampedNumber(NO_LIMIT, 0, Number.MAX_SAFE_INTEGER)
+	});
+	/** The text in the zone; by default it says to drop a file, or files. */
+	text = this.useChange("", () => this.renderText(), { attribute: "text" });
+	/** The name of the zone for screen readers, when its text is not enough. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.zone, "aria-label", value), { attribute: "label" });
+	required = this.useChange(false, (value) => {
+		this.reflect("required", value);
+		this.renderValidity();
+	}, { attribute: "required" });
+	disabled = this.useChange(false, (value) => this.renderDisabled(value), { attribute: "disabled" });
+	/** Draws the zone in the danger colour, for an error the page found itself. */
+	invalid = this.useChange(false, (value) => this.reflect("invalid", value), { attribute: "invalid" });
+	size = this.useChange("md", (value) => {
+		this.reflect("size", value);
+		this._refs.zoneIcon.size.set(ZONE_ICON_SIZES[value]);
+	}, {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	_ids = {
+		hint: uniqueId("jl-file-drop-hint"),
+		text: uniqueId("jl-file-drop-text")
+	};
+	_state = {
+		depth: 0,
+		files: []
+	};
+	_nameWatch = new MutationObserver(() => this.renderFormValue());
+	_refs = this.useRefs((ref) => ({
+		browse: ref(".browse"),
+		files: ref(".files"),
+		hint: ref(".hint"),
+		picker: ref(".picker"),
+		refused: ref(".refused"),
+		text: ref(".text"),
+		zone: ref(".zone"),
+		zoneIcon: ref(".zone-icon")
+	}));
+	/** The files chosen, in the order they came. */
+	get files() {
+		return [...this._state.files];
+	}
+	focus(options) {
+		this._refs.browse.focus(options);
+	}
+	/** Opens the file chooser. */
+	browse() {
+		this.whenRendered(() => {
+			if (!this.disabled.get()) this._refs.picker.click();
+		});
+	}
+	/** Takes every file back, and empties the list of refused ones. */
+	clear() {
+		this.whenRendered(() => {
+			this.renderRefused([]);
+			this.setFiles([]);
+		});
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				class: "zone",
+				role: "group",
+				"aria-labelledby": this._ids.text,
+				"aria-describedby": this._ids.hint,
+				attrs: { part: "base" },
+				children: [
+					/* @__PURE__ */ jsx(JlIcon, {
+						class: "zone-icon",
+						name: "upload",
+						size: ZONE_ICON_SIZES.md
+					}),
+					/* @__PURE__ */ jsx("p", {
+						class: "text",
+						id: this._ids.text
+					}),
+					/* @__PURE__ */ jsx("p", {
+						class: "hint",
+						id: this._ids.hint,
+						hidden: true
+					}),
+					/* @__PURE__ */ jsx("button", {
+						class: "browse",
+						type: "button",
+						"aria-describedby": this._ids.hint,
+						children: "Browse"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("input", {
+				class: "picker",
+				type: "file",
+				tabIndex: -1,
+				hidden: true
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				class: "refused",
+				"aria-live": "polite",
+				hidden: true
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				class: "files",
+				"aria-label": "Chosen files",
+				hidden: true
+			})
+		] });
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_file_drop_default}`;
+	}
+	onConnect() {
+		const zone = this._refs.zone;
+		this._nameWatch.observe(this, {
+			attributeFilter: ["name"],
+			attributes: true
+		});
+		this.renderFormValue();
+		this.on(zone, "click", () => this.browse());
+		this.on(zone, "dragenter", (event) => this.onDragEnter(event));
+		this.on(zone, "dragover", (event) => this.onDragOver(event));
+		this.on(zone, "dragleave", () => this.onDragLeave());
+		this.on(zone, "drop", (event) => this.onDrop(event));
+		this.on(this._refs.picker, "change", () => this.onPicked());
+		this.on(this._refs.files, "click", (event) => this.onFilesClick(event));
+	}
+	onDisconnect() {
+		this._nameWatch.disconnect();
+	}
+	resetValue() {
+		this.renderRefused([]);
+		this.setFiles([]);
+	}
+	setDisabledByForm(disabled) {
+		this.whenRendered(() => {
+			this._refs.browse.disabled = disabled || this.disabled.get();
+		});
+	}
+	canDrop(event) {
+		return hasFiles(event) && !this.disabled.get();
+	}
+	onDragEnter(event) {
+		if (!this.canDrop(event)) return;
+		event.preventDefault();
+		this._state.depth += 1;
+		this.reflect("dragging", true);
+	}
+	onDragOver(event) {
+		if (!this.canDrop(event)) return;
+		event.preventDefault();
+		if (event.dataTransfer !== null) event.dataTransfer.dropEffect = "copy";
+	}
+	onDragLeave() {
+		this._state.depth = Math.max(0, this._state.depth - 1);
+		if (this._state.depth === 0) this.reflect("dragging", false);
+	}
+	onDrop(event) {
+		event.preventDefault();
+		this._state.depth = 0;
+		this.reflect("dragging", false);
+		if (this.disabled.get()) return;
+		this.take([...event.dataTransfer?.files ?? []]);
+	}
+	onPicked() {
+		const picker = this._refs.picker;
+		this.take([...picker.files ?? []]);
+		picker.value = "";
+	}
+	onFilesClick(event) {
+		const button = event.target.closest(".file-remove");
+		if (button === null) return;
+		const index = Number(button.dataset.index);
+		this.setFiles(this._state.files.filter((_, position) => position !== index));
+		this.events.emit("change", this.files);
+		this.focusAfterRemoval(index);
+	}
+	focusAfterRemoval(index) {
+		const buttons = this._refs.files.querySelectorAll(".file-remove");
+		const next = buttons[Math.min(index, buttons.length - 1)];
+		if (next === void 0) {
+			this.focus();
+			return;
+		}
+		next.focus();
+	}
+	rules() {
+		return {
+			accept: this.accept.get(),
+			maxSize: this.maxSize.get(),
+			multiple: this.multiple.get()
+		};
+	}
+	/** Files dropped or picked: the good ones join the list (or replace the file there), the others say why not. */
+	take(incoming) {
+		if (incoming.length === 0) return;
+		const rules = this.rules();
+		const kept = this._state.files;
+		const fresh = rules.multiple ? incoming.filter((file) => !kept.some((known) => isSameFile(known, file))) : incoming;
+		const check = checkFiles(fresh, rules);
+		this.renderRefused(check.refused);
+		if (check.accepted.length === 0) return;
+		this.setFiles(rules.multiple ? [...kept, ...check.accepted] : check.accepted);
+		this.events.emit("change", this.files);
+	}
+	setFiles(files) {
+		this._state.files = files;
+		this.renderFiles();
+		this.renderFormValue();
+		this.renderValidity();
+	}
+	renderFiles() {
+		const files = this._state.files;
+		const editable = !this.disabled.get();
+		const locale = pageLocale();
+		this._refs.files.hidden = files.length === 0;
+		this._refs.files.replaceChildren(...files.map((file, index) => /* @__PURE__ */ jsxs("li", {
+			class: "file",
+			children: [
+				/* @__PURE__ */ jsx(JlIcon, {
+					class: "file-icon",
+					name: file.type.startsWith(IMAGE_FAMILY) ? "image" : "file",
+					size: FILE_ICON_SIZE
+				}),
+				/* @__PURE__ */ jsx("span", {
+					class: "file-name",
+					title: file.name,
+					children: file.name
+				}),
+				/* @__PURE__ */ jsx("span", {
+					class: "file-size",
+					children: formatFileSize(file.size, locale)
+				}),
+				editable ? /* @__PURE__ */ jsx("button", {
+					class: "file-remove",
+					type: "button",
+					"aria-label": `Remove ${file.name}`,
+					"data-index": String(index),
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "x",
+						size: REMOVE_ICON_SIZE
+					})
+				}) : null
+			]
+		})));
+	}
+	renderRefused(refused) {
+		const rules = this.rules();
+		this._refs.refused.hidden = refused.length === 0;
+		this._refs.refused.replaceChildren(...refused.map(({ file, reason }) => /* @__PURE__ */ jsxs("li", {
+			class: "refusal",
+			children: [/* @__PURE__ */ jsx(JlIcon, {
+				name: "circle-alert",
+				size: ALERT_ICON_SIZE
+			}), /* @__PURE__ */ jsxs("span", { children: [
+				/* @__PURE__ */ jsx("span", {
+					class: "refused-name",
+					children: file.name
+				}),
+				" ",
+				REASONS[reason](rules)
+			] })]
+		})));
+	}
+	renderText() {
+		const text = this.text.get();
+		const fallback = this.multiple.get() ? DEFAULT_TEXT.multiple : DEFAULT_TEXT.single;
+		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(" · ");
+		this._refs.hint.textContent = hint;
+		this._refs.hint.hidden = hint === "";
+	}
+	/** Each file is its own entry under the field's name, as from a native file input. */
+	renderFormValue() {
+		const name = this.getAttribute("name") ?? "";
+		if (name === "") {
+			this.internals.setFormValue(null);
+			return;
+		}
+		const data = new FormData();
+		for (const file of this._state.files) data.append(name, file);
+		this.internals.setFormValue(data);
+	}
+	renderValidity() {
+		if (this.required.get() && this._state.files.length === 0) {
+			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.browse);
+			return;
+		}
+		this.internals.setValidity({});
+	}
+	renderDisabled(disabled) {
+		this._refs.browse.disabled = disabled;
+		this.reflect("disabled", disabled);
+		this.renderFiles();
+	}
+};
+JlFileDrop.register();
+export { JlFileDrop };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-list-item.css?raw
+var jl_list_item_default = ":host {\n  display: block;\n  --pad-x: 16px;\n  --pad-y: 12px;\n}\n\n.item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-height: 52px;\n  padding: var(--pad-y) var(--pad-x);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n/* Rows that follow each other are separated by a line; the last one leaves the edge to its container. */\n:host(:not(:last-child)) .item {\n  border-bottom: 1px solid var(--jl-line);\n}\n\n:host([clickable]) .item {\n  cursor: pointer;\n}\n\n:host([clickable]) .item:hover {\n  background: var(--jl-surface-2);\n}\n\n:host([selected]) .item,\n:host([selected][clickable]) .item:hover {\n  background: var(--jl-accent-soft);\n}\n\n/* The link covers the row, so a press anywhere follows it; the trailing controls sit above it. */\n.link {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n}\n\n.link:focus-visible,\n.item:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 55%, transparent);\n}\n\n.end {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 8px;\n}\n\n.start {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n}\n\n.icon-box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface-3);\n  color: var(--jl-text-2);\n}\n\n:host([selected]) .icon-box {\n  background: color-mix(in srgb, var(--jl-accent) 14%, transparent);\n  color: var(--jl-accent);\n}\n\n.text {\n  display: grid;\n  flex: 1;\n  gap: 1px;\n  min-width: 0;\n}\n\n.heading {\n  overflow: hidden;\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host([selected]) .heading {\n  color: var(--jl-accent);\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 1.45;\n}\n\n.meta {\n  flex: none;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.chevron {\n  margin-right: -4px;\n  color: var(--jl-faint);\n}\n";
+export { jl_list_item_default as default };