@syware/jlib 0.0.0-stage → 0.1.3

package/dist/molecules/jl-copy-button.d.ts

@@ -0,0 +1,31 @@
+import { JlElement } from '../base/jl-element';
+import type { ControlSize } from '../types/options.types';
+/** Copies a text to the clipboard, and says so for a moment. Fires `copy` with the text. */
+export declare class JlCopyButton extends JlElement {
+    static readonly selector = "jl-copy-button";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        copy: string;
+    }>>;
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Shown beside the icon; without it the button is an icon with a tooltip. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    private readonly _timer;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    /** Copies the value now; resolves once the clipboard has it. */
+    copy(): Promise<void>;
+    private confirm;
+}

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

@@ -0,0 +1,69 @@
+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 { CONTROL_SIZES } from "../lib/options.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";
+import { Check, Copy } from "lucide";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-copy-button.tsx
+registerIcons({
+	check: Check,
+	copy: Copy
+});
+var CONFIRM_MS = 1600;
+var COPY_ICON = "copy";
+var DONE_ICON = "check";
+/** Copies a text to the clipboard, and says so for a moment. Fires `copy` with the text. */
+var JlCopyButton = class extends JlElement {
+	static selector = "jl-copy-button";
+	events = this.useEvents();
+	value = this.useChange("", () => void 0, { attribute: "value" });
+	/** Shown beside the icon; without it the button is an icon with a tooltip. */
+	label = this.useChange("", (value) => this._refs.button.label.set(value), { attribute: "label" });
+	size = this.useChange("sm", (value) => this._refs.button.size.set(value), {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "sm")
+	});
+	_timer = { id: 0 };
+	_refs = this.useRefs((ref) => ({ button: ref("jl-button") }));
+	templateHtml() {
+		return /* @__PURE__ */ jsx(JlButton, {
+			variant: "ghost",
+			icon: COPY_ICON,
+			hint: "Copy"
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_copy_button_default}`;
+	}
+	onConnect() {
+		this._refs.button.events.register("press", () => void this.copy());
+	}
+	onDisconnect() {
+		window.clearTimeout(this._timer.id);
+	}
+	/** Copies the value now; resolves once the clipboard has it. */
+	async copy() {
+		const text = this.value.get();
+		await navigator.clipboard.writeText(text);
+		this.events.emit("copy", text);
+		this.confirm();
+	}
+	confirm() {
+		const button = this._refs.button;
+		button.icon.set(DONE_ICON);
+		button.hint.set("Copied");
+		this.reflect("copied", true);
+		window.clearTimeout(this._timer.id);
+		this._timer.id = window.setTimeout(() => {
+			button.icon.set(COPY_ICON);
+			button.hint.set("Copy");
+			this.reflect("copied", false);
+		}, CONFIRM_MS);
+	}
+};
+JlCopyButton.register();
+export { JlCopyButton };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-date-picker.css?raw
+var jl_date_picker_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}\n\n.open:disabled {\n  cursor: not-allowed;\n}\n\n:host([open]) .open {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.popup {\n  padding: 0;\n}\n\n/* The panel draws the frame: the calendar inside drops its own. */\n.calendar::part(base) {\n  border: none;\n}\n";
+export { jl_date_picker_default as default };

package/dist/molecules/jl-date-picker.d.ts

@@ -0,0 +1,109 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { Weekday } from '../types/calendar.types';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A field for a date: it shows the date written for people (in the `locale`) and opens a calendar from its
+ * button, Alt + Down or Down. People may also type the date as ISO (`2026-10-25`). `value` and the form hold the
+ * ISO date.
+ */
+export declare class JlDatePicker extends JlFormControl {
+    static readonly selector = "jl-date-picker";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string;
+    }>>;
+    /** The date, as ISO (`2026-10-25`); empty for none. */
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly placeholder: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The field's name for screen readers, when no visible label names it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The first day that can be chosen, as ISO. */
+    readonly min: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The last day that can be chosen, as ISO. */
+    readonly max: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The language the date and the calendar are written in: `fr-CH`. The page's by default. */
+    readonly locale: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The day the calendar's weeks start on: 0 for Sunday, 1 for Monday. */
+    readonly firstDay: Readonly<Readonly<{
+        get(): Weekday;
+        set(setter: ((prevState: Weekday) => Weekday) | Weekday): void;
+    }>>;
+    /** Shows a button that empties the field while it holds a date. */
+    readonly clearable: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): 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 field 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 _popupId;
+    private readonly _state;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    /** Opens the calendar, with the focus on its day. */
+    show(): void;
+    /** Closes the calendar. */
+    hide(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    protected resetValue(): void;
+    protected setDisabledByForm(disabled: boolean): void;
+    private isOpen;
+    /** Down (with or without Alt) opens the calendar. */
+    private onKey;
+    private onOpenPress;
+    private onToggle;
+    /** Escape closes the calendar and brings the focus back to the field, where it came from. */
+    private onPopupKey;
+    private onPick;
+    private openPopup;
+    private closePopup;
+    /** The typed text: an ISO date sets the value, an empty field clears it, anything else goes back to the date. */
+    private commitText;
+    /** Sets the value as people chose it, and says so when it changed. */
+    private commit;
+    private clearValue;
+    /** The value when it is a real ISO date, otherwise nothing. */
+    private validIso;
+    private display;
+    private renderValue;
+    private renderBound;
+    /** Required, and within min and max, as a native date field checks it. */
+    private renderValidity;
+    private renderMissing;
+    private renderClear;
+    private renderDisabled;
+}

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

@@ -0,0 +1,322 @@
+import { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+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 { setOrRemove, uniqueId } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { compareDates, formatDate, parseIsoDate, toIsoDate } from "../lib/calendar.js";
+import { pageLocale } from "../lib/locale.js";
+import { JlCalendar } from "./jl-calendar.js";
+import jl_date_picker_default from "./jl-date-picker.css_raw.js";
+import { css } from "@jadis/core";
+import { Calendar, X } from "lucide";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-date-picker.tsx
+registerIcons({
+	calendar: Calendar,
+	x: X
+});
+var ICON_SIZE = 16;
+var ACTION_ICON_SIZE = 14;
+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 written for people (in the `locale`) and opens a calendar from its
+* button, Alt + Down or Down. People may also type the date as ISO (`2026-10-25`). `value` and the form hold the
+* ISO date.
+*/
+var JlDatePicker = class extends JlFormControl {
+	static selector = "jl-date-picker";
+	events = this.useEvents();
+	/** The date, as ISO (`2026-10-25`); empty for none. */
+	value = this.useChange("", () => this.renderValue(), { attribute: "value" });
+	placeholder = this.useChange("", (value) => setOrRemove(this._refs.native, "placeholder", value), { attribute: "placeholder" });
+	/** The field's name for screen readers, when no visible label names it. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.native, "aria-label", value), { attribute: "label" });
+	/** The first day that can be chosen, as ISO. */
+	min = this.useChange("", (value) => this.renderBound("min", value), { attribute: "min" });
+	/** The last day that can be chosen, as ISO. */
+	max = this.useChange("", (value) => this.renderBound("max", value), { attribute: "max" });
+	/** The language the date and the calendar are written in: `fr-CH`. The page's by default. */
+	locale = this.useChange("", (value) => {
+		this._refs.calendar.locale.set(value);
+		this.renderValue();
+	}, { attribute: "locale" });
+	/** The day the calendar's weeks start on: 0 for Sunday, 1 for Monday. */
+	firstDay = this.useChange(MONDAY, (value) => this._refs.calendar.firstDay.set(value), {
+		attribute: "first-day",
+		parse: parseWeekday
+	});
+	/** Shows a button that empties the field while it holds a date. */
+	clearable = this.useChange(false, () => this.renderClear(), { attribute: "clearable" });
+	required = this.useChange(false, (value) => {
+		this._refs.native.toggleAttribute("aria-required", value);
+		this.reflect("required", value);
+		this.renderValidity();
+	}, { attribute: "required" });
+	disabled = this.useChange(false, (value) => this.renderDisabled(value), { attribute: "disabled" });
+	/** Draws the field in the danger colour, for an error the page found itself. */
+	invalid = this.useChange(false, (value) => {
+		this.reflect("invalid", value);
+		this._refs.native.toggleAttribute("aria-invalid", value);
+	}, { attribute: "invalid" });
+	size = this.useChange("md", (value) => this.reflect("size", value), {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	_popupId = uniqueId("jl-date-picker-popup");
+	_state = {
+		opening: new AbortController(),
+		/** Whether a press on the button should open: read before the press closes the calendar by light dismiss. */
+		openOnPress: null
+	};
+	_refs = this.useRefs((ref) => ({
+		calendar: ref("jl-calendar"),
+		clear: ref(".clear"),
+		control: ref(".control"),
+		native: ref("input"),
+		open: ref(".open"),
+		popup: ref(".popup")
+	}));
+	focus(options) {
+		this._refs.native.focus(options);
+	}
+	/** Opens the calendar, with the focus on its day. */
+	show() {
+		this.whenRendered(() => this.openPopup());
+	}
+	/** Closes the calendar. */
+	hide() {
+		this.whenRendered(() => this.closePopup());
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			class: "control",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					class: "native",
+					role: "combobox",
+					autocomplete: "off",
+					spellcheck: false,
+					"aria-haspopup": "dialog",
+					"aria-expanded": "false",
+					"aria-controls": this._popupId
+				}),
+				/* @__PURE__ */ jsx("button", {
+					class: "action clear",
+					type: "button",
+					"aria-label": "Clear",
+					tabIndex: -1,
+					hidden: true,
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "x",
+						size: ACTION_ICON_SIZE
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					class: "action open",
+					type: "button",
+					"aria-label": DIALOG_LABEL,
+					"aria-haspopup": "dialog",
+					"aria-expanded": "false",
+					"aria-controls": this._popupId,
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "calendar",
+						size: ICON_SIZE
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			class: "floating panel popup",
+			id: this._popupId,
+			popover: "auto",
+			role: "dialog",
+			"aria-label": DIALOG_LABEL,
+			attrs: { part: "popup" },
+			children: /* @__PURE__ */ jsx(JlCalendar, { class: "calendar" })
+		})] });
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${CONTROL_STYLES}${FLOATING_STYLES}${jl_date_picker_default}`;
+	}
+	onConnect() {
+		const native = this._refs.native;
+		const open = this._refs.open;
+		this.on(native, "input", (event) => {
+			event.stopPropagation();
+			this.renderClear();
+		});
+		this.on(native, "change", () => this.commitText());
+		this.on(native, "keydown", (event) => this.onKey(event));
+		this.on(open, "pointerdown", () => {
+			this._state.openOnPress = !this.isOpen();
+		});
+		this.on(open, "click", () => this.onOpenPress());
+		this.on(this._refs.clear, "mousedown", (event) => event.preventDefault());
+		this.on(this._refs.clear, "click", () => this.clearValue());
+		this.on(this._refs.popup, "toggle", (event) => this.onToggle(event));
+		this.on(this._refs.popup, "keydown", (event) => this.onPopupKey(event));
+		this._refs.calendar.events.register("pick", (iso) => this.onPick(iso));
+	}
+	onDisconnect() {
+		this._state.opening.abort();
+	}
+	resetValue() {
+		this.value.set(this.getAttribute("value") ?? "");
+	}
+	setDisabledByForm(disabled) {
+		const off = disabled || this.disabled.get();
+		this.whenRendered(() => {
+			this._refs.native.disabled = off;
+			this._refs.open.disabled = off;
+		});
+	}
+	isOpen() {
+		return this._refs.popup.matches(":popover-open");
+	}
+	/** Down (with or without Alt) opens the calendar. */
+	onKey(event) {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			this.openPopup();
+		}
+	}
+	onOpenPress() {
+		const shouldOpen = this._state.openOnPress ?? !this.isOpen();
+		this._state.openOnPress = null;
+		if (shouldOpen) {
+			this.openPopup();
+			return;
+		}
+		this.closePopup();
+	}
+	onToggle(event) {
+		const open = event.newState === "open";
+		this._refs.native.setAttribute("aria-expanded", String(open));
+		this._refs.open.setAttribute("aria-expanded", String(open));
+		this.reflect("open", open);
+		if (!open) this._state.opening.abort();
+	}
+	/** Escape closes the calendar and brings the focus back to the field, where it came from. */
+	onPopupKey(event) {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		this.closePopup();
+		this.focus();
+	}
+	onPick(iso) {
+		this.closePopup();
+		this.commit(iso);
+		this.focus();
+	}
+	openPopup() {
+		if (this.isOpen() || this.disabled.get() || this._refs.native.disabled) return;
+		this.commitText();
+		const calendar = this._refs.calendar;
+		calendar.value.set(this.validIso());
+		const popup = this._refs.popup;
+		popup.showPopover();
+		this._state.opening.abort();
+		this._state.opening = new AbortController();
+		followAnchor(this._refs.control, popup, PLACEMENT, this._state.opening.signal);
+		calendar.focus();
+	}
+	closePopup() {
+		if (this.isOpen()) this._refs.popup.hidePopover();
+	}
+	/** The typed text: an ISO date sets the value, an empty field clears it, anything else goes back to the date. */
+	commitText() {
+		const text = this._refs.native.value.trim();
+		if (text === this.display(this.value.get())) return;
+		if (text === "") {
+			this.commit("");
+			return;
+		}
+		const date = parseIsoDate(text);
+		if (date === null) {
+			this.renderValue();
+			return;
+		}
+		this.commit(toIsoDate(date));
+	}
+	/** Sets the value as people chose it, and says so when it changed. */
+	commit(iso) {
+		const changed = iso !== this.value.get();
+		this.value.set(iso);
+		if (changed) this.events.emit("change", iso);
+	}
+	clearValue() {
+		this.commit("");
+		this.focus();
+	}
+	/** The value when it is a real ISO date, otherwise nothing. */
+	validIso() {
+		const date = parseIsoDate(this.value.get());
+		return date === null ? "" : toIsoDate(date);
+	}
+	display(value) {
+		const date = parseIsoDate(value);
+		return date === null ? "" : formatDate(date, pageLocale(this.locale.get()));
+	}
+	renderValue() {
+		const value = this.validIso();
+		this._refs.native.value = this.display(value);
+		this._refs.calendar.value.set(value);
+		this.internals.setFormValue(value);
+		this.renderValidity();
+		this.renderClear();
+	}
+	renderBound(bound, value) {
+		this._refs.calendar[bound].set(value);
+		this.renderValidity();
+	}
+	/** Required, and within min and max, as a native date field checks it. */
+	renderValidity() {
+		const date = parseIsoDate(this.value.get());
+		const anchor = this._refs.native;
+		if (date === null) {
+			this.renderMissing(anchor);
+			return;
+		}
+		const min = parseIsoDate(this.min.get());
+		const max = parseIsoDate(this.max.get());
+		const locale = pageLocale(this.locale.get());
+		if (min !== null && compareDates(date, min) < 0) {
+			this.internals.setValidity({ rangeUnderflow: true }, `Choose ${formatDate(min, locale)} or later.`, anchor);
+			return;
+		}
+		if (max !== null && compareDates(date, max) > 0) {
+			this.internals.setValidity({ rangeOverflow: true }, `Choose ${formatDate(max, locale)} or earlier.`, anchor);
+			return;
+		}
+		this.internals.setValidity({});
+	}
+	renderMissing(anchor) {
+		if (this.required.get()) {
+			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, anchor);
+			return;
+		}
+		this.internals.setValidity({});
+	}
+	renderClear() {
+		const editable = !this.disabled.get();
+		this._refs.clear.hidden = !(this.clearable.get() && editable && this._refs.native.value !== "");
+	}
+	renderDisabled(disabled) {
+		this._refs.native.disabled = disabled;
+		this._refs.open.disabled = disabled;
+		this.reflect("disabled", disabled);
+		this.closePopup();
+		this.renderClear();
+	}
+};
+JlDatePicker.register();
+export { JlDatePicker };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-empty.css?raw
+var jl_empty_default = ":host {\n  display: block;\n  --pad: 40px 24px;\n  --medallion: 48px;\n  --heading: var(--jl-font-lg);\n}\n\n:host([size=\"sm\"]) {\n  --pad: 24px 16px;\n  --medallion: 40px;\n  --heading: var(--jl-font-md);\n}\n\n.empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--pad);\n  text-align: center;\n}\n\n.medallion {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--medallion);\n  height: var(--medallion);\n  margin-bottom: 14px;\n  border: 1px solid var(--jl-line);\n  border-radius: 50%;\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n}\n\n:host([size=\"sm\"]) .medallion {\n  margin-bottom: 10px;\n}\n\n.heading {\n  color: var(--jl-text);\n  font-size: var(--heading);\n  font-weight: 650;\n  letter-spacing: -0.01em;\n  line-height: 1.35;\n}\n\n.description {\n  max-width: 44ch;\n  margin-top: 4px;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 1.55;\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 8px;\n  margin-top: 18px;\n}\n\n:host([size=\"sm\"]) .actions {\n  margin-top: 14px;\n}\n";
+export { jl_empty_default as default };

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

@@ -0,0 +1,32 @@
+import { JlElement } from '../base/jl-element';
+import type { EmptySize } from '../types/jl-empty.types';
+export declare const EMPTY_SIZES: readonly EmptySize[];
+/**
+ * What a list, a table or a page shows when it has nothing yet: an icon, a heading, a sentence that says what to
+ * do, and the buttons to do it in the default slot.
+ */
+export declare class JlEmpty extends JlElement {
+    static readonly selector = "jl-empty";
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): EmptySize;
+        set(setter: ((prevState: EmptySize) => EmptySize) | EmptySize): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private renderActions;
+    private renderIcon;
+}

package/dist/molecules/jl-empty.js

@@ -0,0 +1,94 @@
+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 { hasSlotted } from "../lib/slots.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import jl_empty_default from "./jl-empty.css_raw.js";
+import { css } from "@jadis/core";
+import { Inbox } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-empty.tsx
+registerIcons({ inbox: Inbox });
+var EMPTY_SIZES = ["md", "sm"];
+var DEFAULT_ICON = "inbox";
+var NO_ICON = "none";
+var ICON_SIZES = {
+	md: 22,
+	sm: 18
+};
+/**
+* What a list, a table or a page shows when it has nothing yet: an icon, a heading, a sentence that says what to
+* do, and the buttons to do it in the default slot.
+*/
+var JlEmpty = class extends JlElement {
+	static selector = "jl-empty";
+	icon = this.useChange(DEFAULT_ICON, () => this.renderIcon(), { attribute: "icon" });
+	heading = this.useChange("", (value) => {
+		this._refs.heading.textContent = value;
+		this._refs.heading.hidden = value === "";
+	}, { attribute: "heading" });
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+	}, { attribute: "description" });
+	size = this.useChange("md", (value) => {
+		this.reflect("size", value);
+		this.renderIcon();
+	}, {
+		attribute: "size",
+		parse: oneOf(EMPTY_SIZES, "md")
+	});
+	_refs = this.useRefs((ref) => ({
+		actions: ref(".actions"),
+		description: ref(".description"),
+		heading: ref(".heading"),
+		icon: ref("jl-icon"),
+		medallion: ref(".medallion"),
+		slot: ref("slot")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "empty",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					class: "medallion",
+					children: /* @__PURE__ */ jsx(JlIcon, {})
+				}),
+				/* @__PURE__ */ jsx("p", {
+					class: "heading",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("p", {
+					class: "description",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "actions",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", {})
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_empty_default}`;
+	}
+	onConnect() {
+		this.renderActions();
+		this.on(this._refs.slot, "slotchange", () => this.renderActions());
+	}
+	renderActions() {
+		this._refs.actions.hidden = !hasSlotted(this._refs.slot);
+	}
+	renderIcon() {
+		const name = this.icon.get();
+		const hidden = name === "" || name === NO_ICON;
+		this._refs.icon.name.set(hidden ? "" : name);
+		this._refs.icon.size.set(ICON_SIZES[this.size.get()]);
+		this._refs.medallion.hidden = hidden;
+	}
+};
+JlEmpty.register();
+export { EMPTY_SIZES, JlEmpty };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-field.css?raw
+var jl_field_default = ":host {\n  display: block;\n  container-type: inline-size;\n  --label-width: 160px;\n}\n\n.field {\n  display: grid;\n  gap: 6px;\n}\n\n.label-row {\n  display: flex;\n  gap: 3px;\n  color: var(--jl-text);\n  font-size: var(--jl-font-sm);\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.asterisk {\n  color: var(--jl-danger);\n}\n\n.body {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 6px;\n  min-width: 0;\n}\n\n.hint {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 18px;\n}\n\n.error-region:empty {\n  display: contents;\n}\n\n.error {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  color: var(--jl-danger);\n  font-size: var(--jl-font-sm);\n  line-height: 18px;\n}\n\n.error jl-icon {\n  flex: none;\n  margin-top: 2px;\n}\n\n/* Beside: the label takes a column and sits on the baseline of the control's first line of text. */\n:host([orientation=\"horizontal\"]) .field {\n  grid-template-columns: var(--label-width) minmax(0, 1fr);\n  align-items: baseline;\n  gap: 6px 16px;\n}\n\n@container (max-width: 420px) {\n  :host([orientation=\"horizontal\"]) .field {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n";
+export { jl_field_default as default };