@syware/jlib 0.6.0 → 0.7.0

package/dist/molecules/jl-load-more.d.ts

@@ -0,0 +1,41 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * The end of a long list read a page at a time: how much of it shows ("30 of 120") and a button that asks for the
+ * next page (`more`). It shows the button's spinner while `loading`, and takes no room once the whole list shows.
+ */
+export declare class JlLoadMore extends JlElement {
+    static readonly selector = "jl-load-more";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        more: undefined;
+    }>>;
+    /** How many items the list shows. */
+    readonly shown: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** How many it has in all. */
+    readonly total: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The next page is on its way: the button shows a spinner and ignores presses. */
+    readonly loading: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The button's text. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** What shows beside it; `{shown}` and `{total}` are filled. */
+    readonly countText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private render;
+}

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

@@ -0,0 +1,62 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { fillText } from "../lib/text.js";
+import { jlText } from "../lib/texts.js";
+import { JlButton } from "../atoms/jl-button.js";
+import { pageLocale } from "../lib/locale.js";
+import jl_load_more_default from "./jl-load-more.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-load-more.tsx
+/**
+* The end of a long list read a page at a time: how much of it shows ("30 of 120") and a button that asks for the
+* next page (`more`). It shows the button's spinner while `loading`, and takes no room once the whole list shows.
+*/
+var JlLoadMore = class extends JlElement {
+	static selector = "jl-load-more";
+	events = this.useEvents();
+	/** How many items the list shows. */
+	shown = this.useChange(0, () => this.render(), { attribute: "shown" });
+	/** How many it has in all. */
+	total = this.useChange(0, () => this.render(), { attribute: "total" });
+	/** The next page is on its way: the button shows a spinner and ignores presses. */
+	loading = this.useChange(false, (value) => this._refs.button.loading.set(value), { attribute: "loading" });
+	/** The button's text. */
+	label = this.useChange(jlText("showMore"), (value) => this._refs.button.label.set(value), { attribute: "label" });
+	/** What shows beside it; `{shown}` and `{total}` are filled. */
+	countText = this.useChange(jlText("shownOfTotal"), () => this.render(), { attribute: "count-text" });
+	_refs = this.useRefs((ref) => ({
+		button: ref(JlButton),
+		count: ref(".count")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "more",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("span", {
+				class: "count",
+				"aria-live": "polite"
+			}), /* @__PURE__ */ jsx(JlButton, { size: "sm" })]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_load_more_default}`;
+	}
+	onConnect() {
+		this._refs.button.events.register("press", () => {
+			if (!this.loading.get()) this.events.emit("more");
+		});
+	}
+	render() {
+		const locale = pageLocale();
+		const shown = this.shown.get();
+		const total = this.total.get();
+		this._refs.count.textContent = fillText(this.countText.get(), {
+			shown: shown.toLocaleString(locale),
+			total: total.toLocaleString(locale)
+		});
+		this.reflect("complete", shown >= total);
+	}
+};
+JlLoadMore.register();
+export { JlLoadMore };

package/dist/molecules/jl-load-state.js

@@ -3,6 +3,7 @@ import { JlElement } from "../base/jl-element.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { define } from "../lib/define.js";
 import { registerIcons } from "../lib/icons.js";
+import { jlText } from "../lib/texts.js";
 import { JlButton } from "../atoms/jl-button.js";
 import { JlSkeleton } from "../atoms/jl-skeleton.js";
 import { JlEmpty } from "./jl-empty.js";
@@ -28,8 +29,6 @@ var LOAD_SKELETONS = [
 	"lines"
 ];
 var DEFAULT_ERROR_HEADING = "This could not be loaded";
-var DEFAULT_ERROR_TEXT = "Check the connection, then try again. Nothing was changed.";
-var DEFAULT_RETRY_LABEL = "Try again";
 var DEFAULT_DELAY_MS = 300;
 var MAX_DELAY_MS = 5e3;
 var DEFAULT_COUNT = 3;
@@ -95,14 +94,14 @@ var JlLoadState = class extends JlElement {
 		parse: clampedNumber(DEFAULT_DELAY_MS, 0, MAX_DELAY_MS)
 	});
 	errorHeading = this.useChange(DEFAULT_ERROR_HEADING, (value) => this._refs.error.heading.set(value), { attribute: "error-heading" });
-	errorText = this.useChange(DEFAULT_ERROR_TEXT, (value) => this._refs.error.description.set(value), { attribute: "error-text" });
-	retryLabel = this.useChange(DEFAULT_RETRY_LABEL, (value) => this._refs.retry.label.set(value), { attribute: "retry-label" });
+	errorText = this.useChange(jlText("loadStateError"), (value) => this._refs.error.description.set(value), { attribute: "error-text" });
+	retryLabel = this.useChange(jlText("retry"), (value) => this._refs.retry.label.set(value), { attribute: "retry-label" });
 	_work = { latest: 0 };
 	_refs = this.useRefs((ref) => ({
 		bones: ref(".bones"),
 		content: ref(".content"),
 		empty: ref(".empty"),
-		error: ref("jl-empty"),
+		error: ref(JlEmpty),
 		loading: ref(".loading"),
 		retry: ref(".retry")
 	}));
@@ -152,12 +151,12 @@ var JlLoadState = class extends JlElement {
 					class: "error",
 					icon: "circle-alert",
 					heading: DEFAULT_ERROR_HEADING,
-					description: DEFAULT_ERROR_TEXT,
+					description: jlText("loadStateError"),
 					hidden: true,
 					children: /* @__PURE__ */ jsx(JlButton, {
 						class: "retry",
 						icon: "refresh",
-						label: DEFAULT_RETRY_LABEL
+						label: jlText("retry")
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {

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

@@ -3,6 +3,7 @@ import { JlFormControl } from "../base/jl-form-control.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 { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove } from "../lib/dom.js";
 import { clamp, parseNumber, stepValue } from "../lib/numeric.js";
@@ -18,7 +19,6 @@ registerIcons({
 var DEFAULT_STEP = 1;
 var PAGE_STEPS = 10;
 var ICON_SIZE = 14;
-var VALUE_MISSING = "Please fill in this field.";
 var positiveStep = (value) => {
 	const parsed = parseNumber(value);
 	return parsed === null || parsed <= 0 ? DEFAULT_STEP : parsed;
@@ -89,7 +89,7 @@ var JlNumberInput = class extends JlFormControl {
 					class: "action step down",
 					type: "button",
 					tabIndex: -1,
-					"aria-label": "Decrease",
+					"aria-label": jlText("decrease"),
 					children: /* @__PURE__ */ jsx(JlIcon, {
 						name: "minus",
 						size: ICON_SIZE
@@ -106,7 +106,7 @@ var JlNumberInput = class extends JlFormControl {
 					class: "action step up",
 					type: "button",
 					tabIndex: -1,
-					"aria-label": "Increase",
+					"aria-label": jlText("increase"),
 					children: /* @__PURE__ */ jsx(JlIcon, {
 						name: "plus",
 						size: ICON_SIZE
@@ -213,7 +213,7 @@ var JlNumberInput = class extends JlFormControl {
 			this.internals.setValidity({});
 			return;
 		}
-		this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.native);
+		this.internals.setValidity({ valueMissing: true }, jlText("fillField"), this._refs.native);
 	}
 };
 JlNumberInput.register();

package/dist/molecules/jl-pagination.js

@@ -3,6 +3,7 @@ import { JlElement } from "../base/jl-element.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 { clampPage, pageItems } from "../lib/pagination.js";
 import jl_pagination_default from "./jl-pagination.css_raw.js";
@@ -19,7 +20,6 @@ var ICON_SIZES = {
 	md: 16,
 	sm: 14
 };
-var DEFAULT_LABEL = "Pagination";
 var MAX_PAGES = Number.MAX_SAFE_INTEGER;
 var MAX_NEIGHBOURS = 5;
 var STEP_BACK = -1;
@@ -61,8 +61,8 @@ var JlPagination = class extends JlElement {
 		parse: oneOf(CONTROL_SIZES, "md")
 	});
 	/** The navigation's name for screen readers, when a page has more than one. */
-	label = this.useChange(DEFAULT_LABEL, (value) => {
-		this._refs.nav.setAttribute("aria-label", value || DEFAULT_LABEL);
+	label = this.useChange(jlText("pagination"), (value) => {
+		this._refs.nav.setAttribute("aria-label", value || jlText("pagination"));
 	}, { attribute: "label" });
 	_refs = this.useRefs((ref) => ({
 		list: ref(".pages"),
@@ -80,7 +80,7 @@ var JlPagination = class extends JlElement {
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					class: "button previous",
-					"aria-label": "Previous page",
+					"aria-label": jlText("previousPage"),
 					children: /* @__PURE__ */ jsx(JlIcon, { name: "chevron-left" })
 				}),
 				/* @__PURE__ */ jsx("ol", { class: "pages" }),
@@ -91,7 +91,7 @@ var JlPagination = class extends JlElement {
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					class: "button next",
-					"aria-label": "Next page",
+					"aria-label": jlText("nextPage"),
 					children: /* @__PURE__ */ jsx(JlIcon, { name: "chevron-right" })
 				})
 			]

package/dist/molecules/jl-radio-group.js

@@ -1,6 +1,7 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlFormControl } from "../base/jl-form-control.js";
 import { jsonOf, oneOf } from "../lib/attributes.js";
+import { jlText } from "../lib/texts.js";
 import { rovingIndex } from "../lib/roving-index.js";
 import jl_radio_group_default from "./jl-radio-group.css_raw.js";
 import { css } from "@jadis/core";
@@ -10,7 +11,6 @@ var RADIO_GROUP_ORIENTATIONS = ["vertical", "horizontal"];
 var RADIO_GROUP_VARIANTS = ["plain", "cards"];
 var NO_VALUE = "";
 var OPTION_SELECTOR = "[role=\"radio\"]";
-var VALUE_MISSING = "Please select one of these options.";
 /** The keys that move the choice, as with native radios: both arrow pairs whatever the orientation. */
 var MOVES = /* @__PURE__ */ new Map([
 	["ArrowDown", "next"],
@@ -195,7 +195,7 @@ var JlRadioGroup = class extends JlFormControl {
 			this.internals.setValidity({});
 			return;
 		}
-		this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this.radios()[0] ?? this._refs.group);
+		this.internals.setValidity({ valueMissing: true }, jlText("selectOption"), this.radios()[0] ?? this._refs.group);
 	}
 };
 JlRadioGroup.register();

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

@@ -1,6 +1,7 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { registerIcons } from "../lib/icons.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove } from "../lib/dom.js";
 import { JlKbd } from "../atoms/jl-kbd.js";
@@ -11,7 +12,6 @@ import { Search } from "lucide";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/molecules/jl-search-button.tsx
 registerIcons({ search: Search });
-var DEFAULT_LABEL = "Search";
 var DEFAULT_HOTKEY = "mod+k";
 var NO_HOTKEY = "none";
 var ICON_SIZE = 15;
@@ -26,14 +26,14 @@ var JlSearchButton = class extends JlElement {
 	static selector = "jl-search-button";
 	events = this.useEvents();
 	/** The text, and the button's name: "Search". */
-	label = this.useChange(DEFAULT_LABEL, () => this.renderLabel(), { attribute: "label" });
+	label = this.useChange(jlText("search"), () => this.renderLabel(), { attribute: "label" });
 	/** The keys that open the palette, as `jl-kbd` writes them: `mod+k`; `none` for no keys. */
 	hotkey = this.useChange(DEFAULT_HOTKEY, () => this.renderHotkey(), { attribute: "hotkey" });
 	/** The icon alone, the label as its tooltip. */
 	compact = this.useChange(false, (value) => this.reflect("compact", value), { attribute: "compact" });
 	_refs = this.useRefs((ref) => ({
 		button: ref("button"),
-		keys: ref("jl-kbd"),
+		keys: ref(JlKbd),
 		text: ref(".text")
 	}));
 	focus(options) {
@@ -63,7 +63,7 @@ var JlSearchButton = class extends JlElement {
 		this.on(this._refs.button, "click", () => this.events.emit("press"));
 	}
 	renderLabel() {
-		const label = this.label.get() || DEFAULT_LABEL;
+		const label = this.label.get() || jlText("search");
 		this._refs.text.textContent = label;
 		this._refs.button.setAttribute("aria-label", label);
 		this._refs.button.title = label;

package/dist/molecules/jl-search.js

@@ -3,6 +3,7 @@ import { JlFormControl } from "../base/jl-form-control.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 { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove } from "../lib/dom.js";
 import { JlSpinner } from "../atoms/jl-spinner.js";
@@ -19,7 +20,6 @@ registerIcons({
 var DEFAULT_DEBOUNCE_MS = 250;
 var ICON_SIZE = 16;
 var ACTION_ICON_SIZE = 14;
-var DEFAULT_LABEL = "Search";
 var MAC_PATTERN = /Mac|iPhone|iPad|iPod/;
 var TYPING_TARGETS = "input, textarea, select, [contenteditable]";
 var isMac = () => MAC_PATTERN.test(navigator.userAgent);
@@ -38,7 +38,7 @@ var JlSearch = class extends JlFormControl {
 	value = this.useChange("", (value) => this.renderValue(value), { attribute: "value" });
 	placeholder = this.useChange("", (value) => setOrRemove(this._refs.native, "placeholder", value), { attribute: "placeholder" });
 	/** The field's name for screen readers; "Search" when nothing else names it. */
-	label = this.useChange("", (value) => this._refs.native.setAttribute("aria-label", value || DEFAULT_LABEL), { attribute: "label" });
+	label = this.useChange("", (value) => this._refs.native.setAttribute("aria-label", value || jlText("search")), { attribute: "label" });
 	/** How long typing must pause, in milliseconds, before `search` fires. */
 	debounce = this.useChange(DEFAULT_DEBOUNCE_MS, () => void 0, { attribute: "debounce" });
 	/** Keys that focus the field from anywhere: "/" or "mod+k" (⌘ on a Mac, Ctrl elsewhere). */
@@ -68,7 +68,7 @@ var JlSearch = class extends JlFormControl {
 		icon: ref(".icon"),
 		keys: ref(".keys"),
 		native: ref("input"),
-		spinner: ref("jl-spinner")
+		spinner: ref(JlSpinner)
 	}));
 	focus(options) {
 		this._refs.native.focus(options);
@@ -108,7 +108,7 @@ var JlSearch = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "action clear",
 					type: "button",
-					"aria-label": "Clear the search",
+					"aria-label": jlText("clearSearch"),
 					tabIndex: -1,
 					hidden: true,
 					children: /* @__PURE__ */ jsx(JlIcon, {

package/dist/molecules/jl-segmented.js

@@ -6,6 +6,7 @@ import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove } from "../lib/dom.js";
 import { firstIndex, lastIndex, stepIndex } from "../lib/roving.js";
 import { moveIndicator } from "../lib/indicator.js";
+import { watchSizes } from "../lib/resize.js";
 import jl_segmented_default from "./jl-segmented.css_raw.js";
 import { css } from "@jadis/core";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";
@@ -55,7 +56,7 @@ var JlSegmented = class extends JlFormControl {
 	/** The group's name for screen readers, when no visible label names it. */
 	label = this.useChange("", (value) => setOrRemove(this._refs.group, "aria-label", value), { attribute: "label" });
 	_state = { disabledByForm: false };
-	_resize = new ResizeObserver(() => this.placeThumb());
+	_resize = watchSizes(() => this.placeThumb());
 	_refs = this.useRefs((ref) => ({
 		group: ref(".group"),
 		thumb: ref(".thumb")

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

@@ -1,3 +1,3 @@
 // src/molecules/jl-steps.css?raw
-var jl_steps_default = ":host {\n  display: block;\n  container-type: inline-size;\n  --marker: 28px;\n}\n\nol {\n  display: flex;\n  padding: 0;\n  list-style: none;\n}\n\n.step {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n}\n\n.step:last-child {\n  flex: none;\n}\n\n.head {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  min-width: 0;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  text-align: start;\n}\n\nbutton.head {\n  cursor: pointer;\n}\n\n.marker {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--marker);\n  height: var(--marker);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: 50%;\n  background: var(--jl-surface);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  font-weight: 650;\n  font-variant-numeric: tabular-nums;\n}\n\n.text {\n  display: grid;\n  gap: 2px;\n  min-width: 0;\n  padding-top: 4px;\n}\n\n.label {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  line-height: 1.45;\n}\n\n.step[data-status=\"done\"] .marker {\n  border-color: var(--jl-accent-line);\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n.step[data-status=\"done\"] .label {\n  color: var(--jl-text);\n}\n\n.step[data-status=\"current\"] .marker {\n  border-color: var(--jl-accent);\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n  box-shadow: 0 0 0 4px var(--jl-accent-soft);\n}\n\n.step[data-status=\"current\"] .label {\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\nbutton.head:hover .label {\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n\n.line {\n  flex: 1;\n  min-width: 24px;\n  height: 1px;\n  /* Further from the label before it than from the next marker: a label reads as its own step's. */\n  margin: calc(var(--marker) / 2) 12px 0 20px;\n  background: var(--jl-line-strong);\n}\n\n.step[data-status=\"done\"] .line {\n  background: var(--jl-accent);\n}\n\n.step:last-child .line {\n  display: none;\n}\n\n/* Vertical: the markers in a column joined by a rule, the text beside them. */\n:host([orientation=\"vertical\"]) ol {\n  flex-direction: column;\n}\n\n:host([orientation=\"vertical\"]) .step {\n  position: relative;\n  flex: none;\n  padding-bottom: 24px;\n}\n\n:host([orientation=\"vertical\"]) .step:last-child {\n  padding-bottom: 0;\n}\n\n:host([orientation=\"vertical\"]) .line {\n  position: absolute;\n  top: calc(var(--marker) + 4px);\n  bottom: 4px;\n  left: calc(var(--marker) / 2 - 0.5px);\n  width: 1px;\n  height: auto;\n  min-width: 0;\n  margin: 0;\n}\n\n/* Narrow, the horizontal steps keep their markers and only the current step's text. */\n@container (width < 560px) {\n  /* Out of sight, still read: the same rules as .sr-only. */\n  :host(:not([orientation=\"vertical\"])) .step:not([data-status=\"current\"]) .text {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .description {\n    display: none;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .line {\n    min-width: 8px;\n    margin: calc(var(--marker) / 2) 8px 0;\n  }\n\n  /* The current step takes three shares of the room, the others one, never less than their marker and line: the\n     label never runs into the next step, and takes an ellipsis only when there is no room at all. */\n  :host(:not([orientation=\"vertical\"])) .step:not([data-status=\"current\"]) {\n    min-width: min-content;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .step[data-status=\"current\"] {\n    flex: 3 1 0;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .step[data-status=\"current\"] .label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .step[data-status=\"current\"] .line {\n    min-width: 24px;\n    margin-left: 16px;\n  }\n}\n";
+var jl_steps_default = ":host {\n  display: block;\n  container-type: inline-size;\n  --marker: 28px;\n}\n\nol {\n  display: flex;\n  padding: 0;\n  list-style: none;\n}\n\n.step {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n}\n\n.step:last-child {\n  flex: none;\n}\n\n.head {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  min-width: 0;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  text-align: start;\n}\n\nbutton.head {\n  cursor: pointer;\n}\n\n.marker {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--marker);\n  height: var(--marker);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: 50%;\n  background: var(--jl-surface);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  font-weight: 650;\n  font-variant-numeric: tabular-nums;\n}\n\n.text {\n  display: grid;\n  gap: 2px;\n  min-width: 0;\n  padding-top: 4px;\n}\n\n.label {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  line-height: 1.45;\n}\n\n.step[data-status=\"done\"] .marker {\n  border-color: var(--jl-accent-line);\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n.step[data-status=\"done\"] .label {\n  color: var(--jl-text);\n}\n\n.step[data-status=\"current\"] .marker {\n  border-color: var(--jl-accent);\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n  box-shadow: 0 0 0 4px var(--jl-accent-soft);\n}\n\n.step[data-status=\"current\"] .label {\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\n.step[data-failed] .marker {\n  border-color: color-mix(in srgb, var(--jl-danger) 40%, var(--jl-line));\n  background: var(--jl-danger-soft);\n  color: var(--jl-danger);\n  box-shadow: none;\n}\n\n.step[data-failed] .label {\n  color: var(--jl-danger);\n}\n\nbutton.head:hover .label {\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n\n.line {\n  flex: 1;\n  min-width: 24px;\n  height: 1px;\n  /* Further from the label before it than from the next marker: a label reads as its own step's. */\n  margin: calc(var(--marker) / 2) 12px 0 20px;\n  background: var(--jl-line-strong);\n}\n\n.step[data-status=\"done\"] .line {\n  background: var(--jl-accent);\n}\n\n.step:last-child .line {\n  display: none;\n}\n\n/* Vertical: the markers in a column joined by a rule, the text beside them. */\n:host([orientation=\"vertical\"]) ol {\n  flex-direction: column;\n}\n\n:host([orientation=\"vertical\"]) .step {\n  position: relative;\n  flex: none;\n  padding-bottom: 24px;\n}\n\n:host([orientation=\"vertical\"]) .step:last-child {\n  padding-bottom: 0;\n}\n\n:host([orientation=\"vertical\"]) .line {\n  position: absolute;\n  top: calc(var(--marker) + 4px);\n  bottom: 4px;\n  left: calc(var(--marker) / 2 - 0.5px);\n  width: 1px;\n  height: auto;\n  min-width: 0;\n  margin: 0;\n}\n\n/* Narrow, the horizontal steps keep their markers and only the current step's text. */\n@container (width < 560px) {\n  /* Out of sight, still read: the same rules as .sr-only. */\n  :host(:not([orientation=\"vertical\"])) .step:not([data-status=\"current\"]) .text {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .description {\n    display: none;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .line {\n    min-width: 8px;\n    margin: calc(var(--marker) / 2) 8px 0;\n  }\n\n  /* The current step takes three shares of the room, the others one, never less than their marker and line: the\n     label never runs into the next step, and takes an ellipsis only when there is no room at all. */\n  :host(:not([orientation=\"vertical\"])) .step:not([data-status=\"current\"]) {\n    min-width: min-content;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .step[data-status=\"current\"] {\n    flex: 3 1 0;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .step[data-status=\"current\"] .label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  :host(:not([orientation=\"vertical\"])) .step[data-status=\"current\"] .line {\n    min-width: 24px;\n    margin-left: 16px;\n  }\n}\n";
 export { jl_steps_default as default };

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

@@ -38,6 +38,8 @@ export declare class JlSteps extends JlElement {
     templateCss(): string;
     onConnect(): void;
     private render;
+    /** A failed step's ×, a done one's check, or the step's number. */
+    private markerOf;
     private step;
     /** Goes back to a done step people picked, and says so. */
     private goBackTo;

package/dist/molecules/jl-steps.js

@@ -2,21 +2,28 @@ 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 { JlIcon } from "../atoms/jl-icon.js";
 import jl_steps_default from "./jl-steps.css_raw.js";
 import { css } from "@jadis/core";
-import { Check } from "lucide";
+import { Check, X } from "lucide";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 // src/molecules/jl-steps.tsx
-registerIcons({ check: Check });
+registerIcons({
+	check: Check,
+	x: X
+});
 var STEPS_ORIENTATIONS = ["horizontal", "vertical"];
 var CHECK_SIZE = 14;
 var MAX_STEPS = 100;
-var DEFAULT_LABEL = "Progress";
-var STATUS_TEXT = {
-	current: ", current step",
-	done: ", completed",
-	upcoming: ""
+var STATUS_TEXTS = {
+	current: "stepCurrent",
+	done: "stepDone",
+	upcoming: null
+};
+var statusText = (status) => {
+	const key = STATUS_TEXTS[status];
+	return key === null ? "" : jlText(key);
 };
 var statusOf = (index, current) => {
 	if (index < current) return "done";
@@ -45,8 +52,8 @@ var JlSteps = class extends JlElement {
 	/** Done steps become buttons that go back to them. */
 	clickable = this.useChange(false, () => this.render(), { attribute: "clickable" });
 	/** The list's name for screen readers. */
-	label = this.useChange(DEFAULT_LABEL, (value) => {
-		this._refs.list.setAttribute("aria-label", value || DEFAULT_LABEL);
+	label = this.useChange(jlText("progress"), (value) => {
+		this._refs.list.setAttribute("aria-label", value || jlText("progress"));
 	}, { attribute: "label" });
 	_refs = this.useRefs((ref) => ({ list: ref("ol") }));
 	templateHtml() {
@@ -65,21 +72,29 @@ var JlSteps = class extends JlElement {
 		const current = this.current.get();
 		this._refs.list.replaceChildren(...this.items.get().map((item, index) => this.step(item, index, statusOf(index, current))));
 	}
+	/** A failed step's ×, a done one's check, or the step's number. */
+	markerOf(item, index, status) {
+		if (item.failed) return /* @__PURE__ */ jsx(JlIcon, {
+			name: "x",
+			size: CHECK_SIZE
+		});
+		return status === "done" ? /* @__PURE__ */ jsx(JlIcon, {
+			name: "check",
+			size: CHECK_SIZE
+		}) : String(index + 1);
+	}
 	step(item, index, status) {
 		const content = [/* @__PURE__ */ jsx("span", {
 			class: "marker",
 			"aria-hidden": "true",
-			children: status === "done" ? /* @__PURE__ */ jsx(JlIcon, {
-				name: "check",
-				size: CHECK_SIZE
-			}) : String(index + 1)
+			children: this.markerOf(item, index, status)
 		}), /* @__PURE__ */ jsxs("span", {
 			class: "text",
 			children: [/* @__PURE__ */ jsxs("span", {
 				class: "label",
 				children: [item.label, /* @__PURE__ */ jsx("span", {
 					class: "sr-only",
-					children: STATUS_TEXT[status]
+					children: item.failed ? jlText("failedStep") : statusText(status)
 				})]
 			}), item.description === void 0 ? "" : /* @__PURE__ */ jsx("span", {
 				class: "description",
@@ -90,6 +105,7 @@ var JlSteps = class extends JlElement {
 		return /* @__PURE__ */ jsxs("li", {
 			class: "step",
 			"data-status": status,
+			"data-failed": item.failed ? "" : void 0,
 			"aria-current": status === "current" ? "step" : void 0,
 			children: [canGoBack ? /* @__PURE__ */ jsx("button", {
 				type: "button",

package/dist/molecules/jl-tabs.js

@@ -6,6 +6,7 @@ import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { firstIndex, lastIndex, stepIndex } from "../lib/roving.js";
 import { moveIndicator } from "../lib/indicator.js";
+import { watchSizes } from "../lib/resize.js";
 import { JlTabPanel } from "./jl-tab-panel.js";
 import jl_tabs_default from "./jl-tabs.css_raw.js";
 import { css } from "@jadis/core";
@@ -55,7 +56,7 @@ var JlTabs = class extends JlElement {
 	label = this.useChange("", (value) => setOrRemove(this._refs.list, "aria-label", value), { attribute: "label" });
 	_observers = {
 		mutations: new MutationObserver((records) => this.onMutations(records)),
-		resize: new ResizeObserver(() => this.placeIndicator())
+		resize: watchSizes(() => this.placeIndicator())
 	};
 	_refs = this.useRefs((ref) => ({
 		indicator: ref(".indicator"),

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

@@ -4,6 +4,7 @@ import { clampedNumber, 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";
@@ -18,7 +19,6 @@ registerIcons({ x: X });
 var REMOVE_ICON_SIZE = 12;
 var NONE = -1;
 var PLACEMENT = "bottom-start";
-var VALUE_MISSING = "Add at least one tag.";
 var NO_LIMIT = 0;
 var COMMA = ",";
 var MAX_SUGGESTIONS = 8;
@@ -413,7 +413,7 @@ var JlTagInput = class extends JlFormControl {
 	}
 	renderValidity() {
 		if (this.required.get() && this.value.get().length === 0) {
-			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.native);
+			this.internals.setValidity({ valueMissing: true }, jlText("addTag"), this._refs.native);
 			return;
 		}
 		this.internals.setValidity({});

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

@@ -1,3 +1,3 @@
 // src/molecules/jl-toast.css?raw
-var jl_toast_default = ":host {\n  display: block;\n  /* Coloured as jl-alert is, from the same tokens: a toned toast is tinted, its border and icon in its tone. */\n  --fg: var(--jl-text-2);\n  --bg: var(--jl-surface);\n  --border: var(--jl-line);\n  --bar: var(--jl-brand);\n}\n\n:host([tone=\"ok\"]),\n:host([tone=\"warn\"]),\n:host([tone=\"danger\"]),\n:host([tone=\"info\"]) {\n  --border: color-mix(in srgb, var(--fg) 24%, var(--bg));\n  --bar: var(--fg);\n}\n\n:host([tone=\"ok\"]) {\n  --fg: var(--jl-ok);\n  --bg: var(--jl-ok-soft);\n}\n\n:host([tone=\"warn\"]) {\n  --fg: var(--jl-warn);\n  --bg: var(--jl-warn-soft);\n}\n\n:host([tone=\"danger\"]) {\n  --fg: var(--jl-danger);\n  --bg: var(--jl-danger-soft);\n}\n\n:host([tone=\"info\"]) {\n  --fg: var(--jl-info);\n  --bg: var(--jl-info-soft);\n}\n\n.toast {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 14px 12px 14px 16px;\n  overflow: hidden;\n  border: 1px solid var(--border);\n  border-radius: var(--jl-radius-lg);\n  background: var(--bg);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n  box-shadow: var(--jl-shadow-lg);\n}\n\n.icon {\n  margin-top: 1px;\n  color: var(--fg);\n}\n\n.content {\n  display: grid;\n  flex: 1;\n  gap: 2px;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.heading {\n  font-weight: 650;\n}\n\n.text {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n}\n\n.heading[hidden] + .text {\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n}\n\n.buttons {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 2px;\n  margin: -5px -4px -5px 0;\n}\n\n.buttons:not(:has(jl-button:not([hidden]))) {\n  display: none;\n}\n\n.close {\n  --jl-accent: var(--fg);\n  --jl-accent-soft: color-mix(in srgb, var(--fg) 12%, transparent);\n}\n\n.progress {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n}\n\n.bar {\n  height: 100%;\n  background: var(--bar);\n  transform-origin: left center;\n}\n\n:host([paused]) .bar {\n  opacity: 0.55;\n}\n\n/* The line still counts the time, but does not move for people who asked for less motion. */\n@media (prefers-reduced-motion: reduce) {\n  .progress {\n    visibility: hidden;\n  }\n}\n";
+var jl_toast_default = ":host {\n  display: block;\n  /* Coloured as jl-alert is, from the same tokens: a toned toast is tinted, its border and icon in its tone. */\n  --fg: var(--jl-text-2);\n  --bg: var(--jl-surface);\n  --border: var(--jl-line);\n  --bar: var(--jl-brand);\n}\n\n:host([tone=\"ok\"]),\n:host([tone=\"warn\"]),\n:host([tone=\"danger\"]),\n:host([tone=\"info\"]) {\n  --border: color-mix(in srgb, var(--fg) 24%, var(--bg));\n  --bar: var(--fg);\n}\n\n:host([tone=\"ok\"]) {\n  --fg: var(--jl-ok);\n  --bg: var(--jl-ok-soft);\n}\n\n:host([tone=\"warn\"]) {\n  --fg: var(--jl-warn);\n  --bg: var(--jl-warn-soft);\n}\n\n:host([tone=\"danger\"]) {\n  --fg: var(--jl-danger);\n  --bg: var(--jl-danger-soft);\n}\n\n:host([tone=\"info\"]) {\n  --fg: var(--jl-info);\n  --bg: var(--jl-info-soft);\n}\n\n.toast {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 14px 12px 14px 16px;\n  overflow: hidden;\n  border: 1px solid var(--border);\n  border-radius: var(--jl-radius-lg);\n  background: var(--bg);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n  box-shadow: var(--jl-shadow-lg);\n}\n\n.icon {\n  margin-top: 1px;\n  color: var(--fg);\n}\n\n.content {\n  display: grid;\n  flex: 1;\n  gap: 2px;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.heading {\n  font-weight: 650;\n}\n\n.text {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n}\n\n.heading[hidden] + .text {\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n}\n\n.buttons {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 2px;\n  margin: -5px -4px -5px 0;\n}\n\n.buttons:not(:has(jl-button:not([hidden]))) {\n  display: none;\n}\n\n.close {\n  --jl-accent: var(--fg);\n  --jl-accent-soft: color-mix(in srgb, var(--fg) 12%, transparent);\n}\n\n.work {\n  margin-top: 8px;\n}\n\n.progress {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n}\n\n.bar {\n  height: 100%;\n  background: var(--bar);\n  transform-origin: left center;\n}\n\n:host([paused]) .bar {\n  opacity: 0.55;\n}\n\n/* The line still counts the time, but does not move for people who asked for less motion. */\n@media (prefers-reduced-motion: reduce) {\n  .progress {\n    visibility: hidden;\n  }\n}\n";
 export { jl_toast_default as default };

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

@@ -4,7 +4,9 @@ export declare const TOAST_TONES: readonly ToastTone[];
 /**
  * One notification: a heading, a line of text, an icon in its tone's colour, and maybe an action such as "Undo".
  * With a `duration` it closes by itself, a thin line showing the time left; hovering or focusing it pauses the
- * line. It emits `dismiss` once it has closed. Most pages call `toast()` rather than writing it.
+ * line. While `working`, it shows the progress of the work it tells about (a download): `progress` percent, or a
+ * bar running back and forth without it. It emits `dismiss` once it has closed. Most pages call `toast()` rather
+ * than writing it.
  */
 export declare class JlToast extends JlElement {
     static readonly selector = "jl-toast";
@@ -44,6 +46,16 @@ export declare class JlToast extends JlElement {
         get(): number;
         set(setter: number | ((prevState: number) => number)): void;
     }>>;
+    /** Shows a progress bar under the text, while the work it tells about runs. */
+    readonly working: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** How far the work is, in percent; `null` (no attribute) for work of unknown length. */
+    readonly progress: Readonly<Readonly<{
+        get(): number | null;
+        set(setter: number | ((prevState: number | null) => number | null) | null): void;
+    }>>;
     private readonly _timer;
     private readonly _hold;
     private readonly _refs;

package/dist/molecules/jl-toast.js

@@ -3,8 +3,11 @@ import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { TONE_ICONS, TONE_ICON_FILLED } from "../lib/options.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { JlButton } from "../atoms/jl-button.js";
+import { optionalNumber } from "../lib/progress.js";
+import { JlProgress } from "../atoms/jl-progress.js";
 import jl_toast_default from "./jl-toast.css_raw.js";
 import { css } from "@jadis/core";
 import { CircleCheck, CircleX, Info, Sparkles, TriangleAlert, X } from "lucide";
@@ -45,7 +48,9 @@ var prefersReducedMotion = () => window.matchMedia(REDUCED_MOTION).matches;
 /**
 * One notification: a heading, a line of text, an icon in its tone's colour, and maybe an action such as "Undo".
 * With a `duration` it closes by itself, a thin line showing the time left; hovering or focusing it pauses the
-* line. It emits `dismiss` once it has closed. Most pages call `toast()` rather than writing it.
+* line. While `working`, it shows the progress of the work it tells about (a download): `progress` percent, or a
+* bar running back and forth without it. It emits `dismiss` once it has closed. Most pages call `toast()` rather
+* than writing it.
 */
 var JlToast = class extends JlElement {
 	static selector = "jl-toast";
@@ -79,6 +84,15 @@ var JlToast = class extends JlElement {
 	}, { attribute: "action-label" });
 	/** How long it stays, in milliseconds; 0 keeps it until it is closed. */
 	duration = this.useChange(0, () => this.startTimer(), { attribute: "duration" });
+	/** Shows a progress bar under the text, while the work it tells about runs. */
+	working = this.useChange(false, (value) => {
+		this._refs.work.hidden = !value;
+	}, { attribute: "working" });
+	/** How far the work is, in percent; `null` (no attribute) for work of unknown length. */
+	progress = this.useChange(null, (value) => this._refs.work.value.set(value), {
+		attribute: "progress",
+		parse: optionalNumber
+	});
 	_timer = {
 		animation: null,
 		entered: false
@@ -95,7 +109,8 @@ var JlToast = class extends JlElement {
 		icon: ref(".icon"),
 		progress: ref(".progress"),
 		text: ref(".text"),
-		toast: ref(".toast")
+		toast: ref(".toast"),
+		work: ref(JlProgress)
 	}));
 	/** Closes the toast: it leaves, hides, then emits `dismiss`. */
 	dismiss() {
@@ -146,6 +161,11 @@ var JlToast = class extends JlElement {
 							class: "text",
 							hidden: true
 						}),
+						/* @__PURE__ */ jsx(JlProgress, {
+							class: "work",
+							size: "sm",
+							hidden: true
+						}),
 						/* @__PURE__ */ jsx("slot", {})
 					]
 				}),
@@ -161,7 +181,7 @@ var JlToast = class extends JlElement {
 						variant: "ghost",
 						size: "sm",
 						icon: "x",
-						hint: "Close",
+						hint: jlText("close"),
 						hidden: true
 					})]
 				}),