@syware/jlib 0.5.1 → 0.7.0

package/dist/organisms/jl-command-palette.css_raw.js

@@ -1,3 +1,3 @@
 // src/organisms/jl-command-palette.css?raw
-var jl_command_palette_default = ":host {\n  display: contents;\n}\n\ndialog {\n  flex-direction: column;\n  width: min(620px, calc(100vw - 24px));\n  max-width: none;\n  max-height: min(520px, calc(100dvh - 24vh));\n  margin: 12vh auto auto;\n  padding: 0;\n  overflow: hidden;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  box-shadow: var(--jl-shadow-lg);\n}\n\ndialog[open] {\n  display: flex;\n  animation: drop var(--jl-fast) var(--jl-ease);\n}\n\ndialog::backdrop {\n  background: var(--jl-scrim);\n  backdrop-filter: blur(2px);\n}\n\n.search {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 10px;\n  height: 52px;\n  padding: 0 14px 0 16px;\n  border-bottom: 1px solid var(--jl-line);\n}\n\n.search-icon {\n  color: var(--jl-faint);\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: none;\n  font-size: 15px;\n}\n\ninput::placeholder {\n  color: var(--jl-faint);\n}\n\ninput:focus-visible {\n  box-shadow: none;\n}\n\nkbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 5px;\n  border: 1px solid var(--jl-line-strong);\n  border-bottom-width: 2px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface);\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n}\n\n.results {\n  flex: 1;\n  min-height: 0;\n  padding: 6px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scroll-padding: 6px;\n}\n\n[role=\"group\"] + [role=\"group\"] {\n  margin-top: 4px;\n  padding-top: 4px;\n  border-top: 1px solid var(--jl-line-soft);\n}\n\n.group-label {\n  padding: 8px 10px 4px;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 38px;\n  padding: 0 10px;\n  border-radius: var(--jl-radius-sm);\n  color: var(--jl-text-2);\n  cursor: pointer;\n}\n\n.option[aria-selected=\"true\"] {\n  background: var(--jl-accent-soft);\n  color: var(--jl-text);\n}\n\n.option-icon {\n  flex: none;\n  width: 16px;\n  color: var(--jl-muted);\n}\n\n.option[aria-selected=\"true\"] .option-icon {\n  color: var(--jl-accent);\n}\n\n.option-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nmark {\n  background: none;\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\n.keys {\n  display: inline-flex;\n  flex: none;\n  gap: 3px;\n}\n\n.empty {\n  padding: 36px 16px;\n  color: var(--jl-muted);\n  text-align: center;\n}\n\nfooter {\n  display: flex;\n  flex: none;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px 16px;\n  padding: 8px 16px;\n  border-top: 1px solid var(--jl-line);\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n.hint,\n.hotkey-keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.hotkey-hint {\n  margin-left: auto;\n}\n\n@media (width < 520px) {\n  dialog {\n    margin-top: 12px;\n    max-height: calc(100dvh - 24px);\n  }\n\n  .hotkey-hint {\n    display: none;\n  }\n}\n\n@keyframes drop {\n  from {\n    opacity: 0;\n    transform: translateY(-6px) scale(0.98);\n  }\n}\n";
+var jl_command_palette_default = ":host {\n  display: contents;\n}\n\ndialog {\n  flex-direction: column;\n  width: min(620px, calc(100vw - 24px));\n  max-width: none;\n  max-height: min(520px, calc(100dvh - 24vh));\n  margin: 12vh auto auto;\n  padding: 0;\n  overflow: hidden;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  box-shadow: var(--jl-shadow-lg);\n}\n\ndialog[open] {\n  display: flex;\n  animation: drop var(--jl-fast) var(--jl-ease);\n}\n\ndialog::backdrop {\n  background: var(--jl-scrim);\n  backdrop-filter: blur(2px);\n}\n\n.search {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 10px;\n  height: 52px;\n  padding: 0 14px 0 16px;\n  border-bottom: 1px solid var(--jl-line);\n}\n\n.search-icon,\n.search-spinner {\n  flex: none;\n  color: var(--jl-faint);\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: none;\n  /* At least the text of fields: 16px on touch screens, where phones zoom into smaller text. */\n  font-size: max(15px, var(--jl-control-font));\n}\n\ninput::placeholder {\n  color: var(--jl-faint);\n}\n\ninput:focus-visible {\n  box-shadow: none;\n}\n\nkbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 5px;\n  border: 1px solid var(--jl-line-strong);\n  border-bottom-width: 2px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface);\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n}\n\n.results {\n  flex: 1;\n  min-height: 0;\n  padding: 6px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scroll-padding: 6px;\n}\n\n[role=\"group\"] + [role=\"group\"] {\n  margin-top: 4px;\n  padding-top: 4px;\n  border-top: 1px solid var(--jl-line-soft);\n}\n\n.group-label {\n  padding: 8px 10px 4px;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 38px;\n  padding: 0 10px;\n  border-radius: var(--jl-radius-sm);\n  color: var(--jl-text-2);\n  cursor: pointer;\n}\n\n.option[aria-selected=\"true\"] {\n  background: var(--jl-accent-soft);\n  color: var(--jl-text);\n}\n\n.option-icon {\n  flex: none;\n  width: 16px;\n  color: var(--jl-muted);\n}\n\n.option[aria-selected=\"true\"] .option-icon {\n  color: var(--jl-accent);\n}\n\n.option-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.option-description {\n  flex: none;\n  max-width: 40%;\n  overflow: hidden;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nmark {\n  background: none;\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\n.keys {\n  display: inline-flex;\n  flex: none;\n  gap: 3px;\n}\n\n.empty {\n  padding: 36px 16px;\n  color: var(--jl-muted);\n  text-align: center;\n}\n\nfooter {\n  display: flex;\n  flex: none;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px 16px;\n  padding: 8px 16px;\n  border-top: 1px solid var(--jl-line);\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n.hint,\n.hotkey-keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.hotkey-hint {\n  margin-left: auto;\n}\n\n@media (width < 520px) {\n  dialog {\n    margin-top: 12px;\n    max-height: calc(100dvh - 24px);\n  }\n\n  .hotkey-hint {\n    display: none;\n  }\n}\n\n@keyframes drop {\n  from {\n    opacity: 0;\n    transform: translateY(-6px) scale(0.98);\n  }\n}\n";
 export { jl_command_palette_default as default };

package/dist/organisms/jl-command-palette.d.ts

@@ -7,10 +7,12 @@ import type { PaletteCommand } from '../types/jl-command-palette.types';
  */
 export declare class JlCommandPalette extends JlElement {
     static readonly selector = "jl-command-palette";
+    /** `search`: what was typed, once typing pauses (and empty when it opens), for a page that answers it. */
     readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
         select: string;
         open: undefined;
         close: undefined;
+        search: string;
     }>>;
     readonly commands: Readonly<Readonly<{
         get(): PaletteCommand[];
@@ -34,6 +36,16 @@ export declare class JlCommandPalette extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** How long typing pauses, in milliseconds, before `search` fires. */
+    readonly debounce: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** Shows a spinner in place of the search icon, while the page looks for what was typed. */
+    readonly loading: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
     /** The dialog's name for screen readers. */
     readonly label: Readonly<Readonly<{
         get(): string;
@@ -52,6 +64,8 @@ export declare class JlCommandPalette extends JlElement {
     private move;
     private choose;
     private renderOpen;
+    private scheduleSearch;
+    private search;
     private renderHotkey;
     private renderResults;
     private groupNode;

package/dist/organisms/jl-command-palette.js

@@ -2,8 +2,10 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { jsonOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
-import { setOrRemove } from "../lib/dom.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";
 import { highlightSegments } from "../lib/fuzzy.js";
 import { hotkeyLabels, isApplePlatform, matchesHotkey, parseHotkey } from "../lib/hotkey.js";
 import { groupMatches, matchCommands } from "../lib/palette.js";
@@ -15,10 +17,8 @@ import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 registerIcons({ search: Search });
 var DEFAULT_HOTKEY = "mod+k";
 var NO_HOTKEY = "none";
-var DEFAULT_PLACEHOLDER = "Type a command or search…";
-var DEFAULT_EMPTY_TEXT = "No matching commands";
-var DEFAULT_LABEL = "Command palette";
 var SEARCH_ICON_SIZE = 18;
+var DEFAULT_DEBOUNCE_MS = 250;
 var OPTION_ICON_SIZE = 16;
 /** How far each key moves the active command. */
 var MOVES = /* @__PURE__ */ new Map([["ArrowDown", 1], ["ArrowUp", -1]]);
@@ -37,26 +37,35 @@ function highlighted(label, positions) {
 */
 var JlCommandPalette = class extends JlElement {
 	static selector = "jl-command-palette";
+	/** `search`: what was typed, once typing pauses (and empty when it opens), for a page that answers it. */
 	events = this.useEvents();
 	commands = this.useChange([], () => this.renderResults(), {
 		attribute: "commands",
 		parse: jsonOf([])
 	});
 	open = this.useChange(false, (value) => this.renderOpen(value), { attribute: "open" });
-	placeholder = this.useChange(DEFAULT_PLACEHOLDER, (value) => {
+	placeholder = this.useChange(jlText("commandPlaceholder"), (value) => {
 		this._refs.input.placeholder = value;
 	}, { attribute: "placeholder" });
 	/** The keys that open and close it from anywhere on the page; `none` for no keys. `mod` is ⌘ or Ctrl. */
 	hotkey = this.useChange(DEFAULT_HOTKEY, () => this.renderHotkey(), { attribute: "hotkey" });
 	/** What it says when nothing matches. */
-	emptyText = this.useChange(DEFAULT_EMPTY_TEXT, (value) => {
+	emptyText = this.useChange(jlText("noCommands"), (value) => {
 		this._refs.empty.textContent = value;
 	}, { attribute: "empty-text" });
+	/** How long typing pauses, in milliseconds, before `search` fires. */
+	debounce = this.useChange(DEFAULT_DEBOUNCE_MS, () => void 0, { attribute: "debounce" });
+	/** Shows a spinner in place of the search icon, while the page looks for what was typed. */
+	loading = this.useChange(false, (value) => {
+		this._refs.searchIcon.hidden = value;
+		this._refs.spinner.hidden = !value;
+	}, { attribute: "loading" });
 	/** The dialog's name for screen readers. */
-	label = this.useChange(DEFAULT_LABEL, (value) => this._refs.dialog.setAttribute("aria-label", value), { attribute: "label" });
+	label = this.useChange(jlText("commandPalette"), (value) => this._refs.dialog.setAttribute("aria-label", value), { attribute: "label" });
 	_state = {
 		active: 0,
-		matches: []
+		matches: [],
+		timer: 0
 	};
 	_refs = this.useRefs((ref) => ({
 		dialog: ref("dialog"),
@@ -64,7 +73,9 @@ var JlCommandPalette = class extends JlElement {
 		hotkeyHint: ref(".hotkey-hint"),
 		hotkeyKeys: ref(".hotkey-keys"),
 		input: ref("input"),
-		results: ref(".results")
+		results: ref(".results"),
+		searchIcon: ref(".search-icon"),
+		spinner: ref(JlSpinner)
 	}));
 	show() {
 		this.open.set(true);
@@ -84,6 +95,11 @@ var JlCommandPalette = class extends JlElement {
 							name: "search",
 							size: SEARCH_ICON_SIZE
 						}),
+						/* @__PURE__ */ jsx(JlSpinner, {
+							class: "search-spinner",
+							size: SEARCH_ICON_SIZE,
+							hidden: true
+						}),
 						/* @__PURE__ */ jsx("input", {
 							type: "text",
 							role: "combobox",
@@ -103,7 +119,7 @@ var JlCommandPalette = class extends JlElement {
 					class: "results",
 					id: "results",
 					role: "listbox",
-					"aria-label": "Commands"
+					"aria-label": jlText("commands")
 				}),
 				/* @__PURE__ */ jsx("p", {
 					class: "empty",
@@ -144,6 +160,7 @@ var JlCommandPalette = class extends JlElement {
 		this.on(input, "input", (event) => {
 			event.stopPropagation();
 			this.renderResults();
+			this.scheduleSearch();
 		});
 		this.on(input, "keydown", (event) => this.navigate(event));
 		this.on(this._refs.results, "pointermove", (event) => {
@@ -208,11 +225,20 @@ var JlCommandPalette = class extends JlElement {
 		}
 		this._refs.input.value = "";
 		this.renderResults();
+		this.search("");
 		dialog.showModal();
 		this._refs.input.focus();
 		this.reflect("open", true);
 		this.events.emit("open");
 	}
+	scheduleSearch() {
+		window.clearTimeout(this._state.timer);
+		this._state.timer = window.setTimeout(() => this.search(this._refs.input.value), this.debounce.get());
+	}
+	search(query) {
+		window.clearTimeout(this._state.timer);
+		this.events.emit("search", query);
+	}
 	renderHotkey() {
 		const hotkey = this.hotkey.get();
 		const none = hotkey === "" || hotkey === NO_HOTKEY;
@@ -265,6 +291,10 @@ var JlCommandPalette = class extends JlElement {
 					class: "option-label",
 					children: highlighted(command.label, match.positions)
 				}),
+				command.description ? /* @__PURE__ */ jsx("span", {
+					class: "option-description",
+					children: command.description
+				}) : null,
 				command.shortcut === void 0 ? null : /* @__PURE__ */ jsx("span", {
 					class: "keys",
 					children: keycaps(command.shortcut)

package/dist/organisms/jl-confirm.d.ts

@@ -57,6 +57,7 @@ export declare function confirmDialog(options: ConfirmOptions): Promise<boolean>
 /**
  * Guards a form or an editor against leaving with changes not saved. Closing or reloading the tab asks the
  * browser's own question; the function it returns asks in the page, for the app's router to call before it moves
- * on: `if (!(await canLeave())) return;`. It resolves `true` at once when nothing would be lost.
+ * on: `if (!(await canLeave())) return;`. It resolves `true` at once when nothing would be lost, or once `signal`
+ * ended the guard.
  */
 export declare function guardLeave(options: LeaveGuardOptions): () => Promise<boolean>;

package/dist/organisms/jl-confirm.js

@@ -2,6 +2,7 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { define } from "../lib/define.js";
+import { jlText } from "../lib/texts.js";
 import { JlButton } from "../atoms/jl-button.js";
 import jl_confirm_default from "./jl-confirm.css_raw.js";
 import { JlDialog } from "./jl-dialog.js";
@@ -46,7 +47,7 @@ var JlConfirm = class extends JlElement {
 	_refs = this.useRefs((ref) => ({
 		cancel: ref(".cancel"),
 		confirm: ref(".confirm"),
-		dialog: ref("jl-dialog"),
+		dialog: ref(JlDialog),
 		text: ref(".text")
 	}));
 	/** Opens the question; resolves `true` when confirmed, `false` otherwise. Asking again while open waits for the same answer. */
@@ -130,24 +131,29 @@ function confirmDialog(options) {
 	return element.ask().finally(() => element.remove());
 }
 var LEAVE_HEADING = "Leave without saving?";
-var LEAVE_TEXT = "Your changes are lost.";
-var LEAVE_LABEL = "Leave";
-var STAY_LABEL = "Keep editing";
 /**
 * Guards a form or an editor against leaving with changes not saved. Closing or reloading the tab asks the
 * browser's own question; the function it returns asks in the page, for the app's router to call before it moves
-* on: `if (!(await canLeave())) return;`. It resolves `true` at once when nothing would be lost.
+* on: `if (!(await canLeave())) return;`. It resolves `true` at once when nothing would be lost, or once `signal`
+* ended the guard.
 */
 function guardLeave(options) {
 	window.addEventListener("beforeunload", (event) => {
 		if (options.isDirty()) event.preventDefault();
 	}, { signal: options.signal });
-	return async () => !options.isDirty() || confirmDialog({
-		cancelLabel: options.stayLabel ?? STAY_LABEL,
-		confirmLabel: options.leaveLabel ?? LEAVE_LABEL,
-		heading: options.heading ?? LEAVE_HEADING,
-		text: options.text ?? LEAVE_TEXT,
-		tone: "danger"
-	});
+	const asking = { pending: null };
+	return () => {
+		if (options.signal.aborted || !options.isDirty()) return Promise.resolve(true);
+		asking.pending ??= confirmDialog({
+			cancelLabel: options.stayLabel ?? jlText("stay"),
+			confirmLabel: options.leaveLabel ?? jlText("leave"),
+			heading: options.heading ?? LEAVE_HEADING,
+			text: options.text ?? jlText("leaveText"),
+			tone: "danger"
+		}).finally(() => {
+			asking.pending = null;
+		});
+		return asking.pending;
+	};
 }
 export { CONFIRM_TONES, JlConfirm, confirmDialog, guardLeave };

package/dist/organisms/jl-dialog.js

@@ -2,6 +2,7 @@ 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 { jlText } from "../lib/texts.js";
 import { JlButton } from "../atoms/jl-button.js";
 import jl_dialog_default from "./jl-dialog.css_raw.js";
 import { css } from "@jadis/core";
@@ -67,7 +68,7 @@ var JlDialog = class extends JlElement {
 					class: "close",
 					variant: "ghost",
 					icon: "x",
-					hint: "Close",
+					hint: jlText("close"),
 					size: "sm"
 				})] }),
 				/* @__PURE__ */ jsx("div", {

package/dist/organisms/jl-drawer.js

@@ -2,6 +2,7 @@ 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 { jlText } from "../lib/texts.js";
 import { JlButton } from "../atoms/jl-button.js";
 import jl_drawer_default from "./jl-drawer.css_raw.js";
 import { css } from "@jadis/core";
@@ -85,7 +86,7 @@ var JlDrawer = class extends JlElement {
 						class: "close",
 						variant: "ghost",
 						icon: "x",
-						hint: "Close",
+						hint: jlText("close"),
 						size: "sm"
 					})]
 				})] }),

package/dist/organisms/jl-flow.js

@@ -2,8 +2,9 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { jsonOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
-import { setOrRemove, svgElement } from "../lib/dom.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, svgElement } from "../lib/dom.js";
 import { FLOW_NODE, FLOW_ZOOM, centeredAt, connect, edgeEnds, edgeMidpoint, edgePath, fitView, isEdgeTaken, isPortFree, layoutFlow, moveNode, nodeAt, nodeHeight, outputAnchor, portX, portsOf, positionAfter, removeEdge, removeNode, revealIn, snap, toWorld, zoomAt } from "../lib/flow.js";
 import jl_flow_default from "./jl-flow.css_raw.js";
 import { css } from "@jadis/core";
@@ -26,7 +27,6 @@ var EMPTY = {
 	nodes: []
 };
 var IDLE = { kind: "idle" };
-var DEFAULT_LABEL = "Flow";
 var DOT_SPACING = 20;
 var WHEEL_ZOOM_SPEED = .0018;
 var CLICK_TOLERANCE = 4;
@@ -116,7 +116,7 @@ var JlFlow = class extends JlElement {
 	*/
 	dropType = this.useChange("", () => void 0, { attribute: "drop-type" });
 	/** The canvas's name for screen readers. */
-	label = this.useChange("", (value) => this._refs.viewport.setAttribute("aria-label", value || DEFAULT_LABEL), { attribute: "label" });
+	label = this.useChange("", (value) => this._refs.viewport.setAttribute("aria-label", value || jlText("flow")), { attribute: "label" });
 	_state = {
 		edge: "",
 		fitted: false,
@@ -203,7 +203,7 @@ var JlFlow = class extends JlElement {
 							class: "remove-edge",
 							"data-control": "",
 							hidden: true,
-							"aria-label": "Remove this edge",
+							"aria-label": jlText("removeEdge"),
 							children: /* @__PURE__ */ jsx(JlIcon, {
 								name: "x",
 								size: ADD_ICON_SIZE
@@ -227,8 +227,8 @@ var JlFlow = class extends JlElement {
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							class: "control zoom-out",
-							title: "Zoom out",
-							"aria-label": "Zoom out",
+							title: jlText("zoomOut"),
+							"aria-label": jlText("zoomOut"),
 							children: /* @__PURE__ */ jsx(JlIcon, {
 								name: "minus",
 								size: CONTROL_ICON_SIZE
@@ -238,8 +238,8 @@ var JlFlow = class extends JlElement {
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							class: "control zoom-in",
-							title: "Zoom in",
-							"aria-label": "Zoom in",
+							title: jlText("zoomIn"),
+							"aria-label": jlText("zoomIn"),
 							children: /* @__PURE__ */ jsx(JlIcon, {
 								name: "plus",
 								size: CONTROL_ICON_SIZE
@@ -248,8 +248,8 @@ var JlFlow = class extends JlElement {
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							class: "control fit",
-							title: "Show every node",
-							"aria-label": "Show every node",
+							title: jlText("fitView"),
+							"aria-label": jlText("fitView"),
 							children: /* @__PURE__ */ jsx(JlIcon, {
 								name: "maximize",
 								size: CONTROL_ICON_SIZE
@@ -258,8 +258,8 @@ var JlFlow = class extends JlElement {
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							class: "control tidy",
-							title: "Tidy up the layout",
-							"aria-label": "Tidy up the layout",
+							title: jlText("tidyLayout"),
+							"aria-label": jlText("tidyLayout"),
 							children: /* @__PURE__ */ jsx(JlIcon, {
 								name: "wand-sparkles",
 								size: CONTROL_ICON_SIZE
@@ -671,7 +671,7 @@ var JlFlow = class extends JlElement {
 		const element = /* @__PURE__ */ jsxs("span", {
 			class: "port",
 			"data-port": port.id,
-			title: "Drag to another node to connect",
+			title: jlText("dragToConnect"),
 			attrs: { part: "port" },
 			children: [
 				/* @__PURE__ */ jsx("span", { class: "dot" }),

package/dist/organisms/jl-navbar.js

@@ -2,6 +2,7 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { jsonOf } 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_navbar_default from "./jl-navbar.css_raw.js";
 import { css } from "@jadis/core";
@@ -13,7 +14,6 @@ registerIcons({
 	x: X
 });
 var ICON_SIZE = 18;
-var DEFAULT_LABEL = "Main";
 var MENU_ICON = "menu";
 var CLOSE_ICON = "x";
 /**
@@ -30,9 +30,9 @@ var JlNavbar = class extends JlElement {
 	/** Stays at the top of the window while the page scrolls. */
 	sticky = this.useChange(false, (value) => this.reflect("sticky", value), { attribute: "sticky" });
 	/** The navigation's name for screen readers. */
-	label = this.useChange(DEFAULT_LABEL, (value) => {
-		this._refs.links.setAttribute("aria-label", value || DEFAULT_LABEL);
-		this._refs.drawer.setAttribute("aria-label", value || DEFAULT_LABEL);
+	label = this.useChange(jlText("mainNavigation"), (value) => {
+		this._refs.links.setAttribute("aria-label", value || jlText("mainNavigation"));
+		this._refs.drawer.setAttribute("aria-label", value || jlText("mainNavigation"));
 	}, { attribute: "label" });
 	_refs = this.useRefs((ref) => ({
 		drawer: ref(".drawer"),
@@ -65,7 +65,7 @@ var JlNavbar = class extends JlElement {
 						class: "toggle",
 						"aria-expanded": "false",
 						"aria-controls": "drawer",
-						"aria-label": "Menu",
+						"aria-label": jlText("menu"),
 						children: /* @__PURE__ */ jsx(JlIcon, {
 							name: MENU_ICON,
 							size: ICON_SIZE
@@ -112,7 +112,7 @@ var JlNavbar = class extends JlElement {
 	setDrawer(open) {
 		this._refs.drawer.hidden = !open;
 		this._refs.toggle.setAttribute("aria-expanded", String(open));
-		this._refs.toggle.setAttribute("aria-label", open ? "Close the menu" : "Menu");
+		this._refs.toggle.setAttribute("aria-label", open ? jlText("closeMenu") : jlText("menu"));
 		this._refs.toggleIcon.name.set(open ? CLOSE_ICON : MENU_ICON);
 		this.reflect("expanded", open);
 	}

package/dist/organisms/jl-side-nav.css_raw.js

@@ -1,3 +1,3 @@
 // src/organisms/jl-side-nav.css?raw
-var jl_side_nav_default = ":host {\n  display: block;\n  width: var(--width, 248px);\n  height: 100%;\n  min-height: 0;\n  transition: width var(--jl-slow) var(--jl-ease);\n}\n\n:host([collapsed]) {\n  width: var(--rail-width, 60px);\n}\n\nnav {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  height: 100%;\n  padding: 12px 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n}\n\n::slotted([slot=\"footer\"]) {\n  margin-top: auto;\n}\n\n.sections {\n  display: grid;\n  gap: 14px;\n}\n\n.section {\n  display: grid;\n  gap: 2px;\n}\n\n.section-label {\n  padding: 4px 10px 6px;\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 650;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.items,\n.children {\n  display: grid;\n  gap: 2px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.children {\n  margin-top: 2px;\n}\n\n.entry {\n  position: relative;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  min-height: 34px;\n  padding: 0 10px;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: none;\n  color: inherit;\n  font: inherit;\n  font-weight: 550;\n  text-align: start;\n  text-decoration: none;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.item[data-depth=\"1\"] {\n  padding-left: 36px;\n}\n\n.item[data-depth=\"2\"] {\n  padding-left: 50px;\n}\n\n.item[data-depth=\"3\"] {\n  padding-left: 64px;\n}\n\n.item:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.item[aria-current=\"page\"] {\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n.item.holds-active {\n  color: var(--jl-text);\n}\n\n.item-icon {\n  color: var(--jl-faint);\n}\n\n.item:hover .item-icon,\n.item.holds-active .item-icon {\n  color: var(--jl-text-2);\n}\n\n.item[aria-current=\"page\"] .item-icon {\n  color: var(--jl-accent);\n}\n\n.item-initial {\n  display: none;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface-3);\n  color: var(--jl-text-2);\n  font-size: 11px;\n  font-weight: 700;\n}\n\n/* Nested items without an icon line their labels up under their parent's label. */\n.item:not([data-depth=\"0\"]) .item-initial {\n  display: none;\n}\n.item-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.item-badge {\n  flex: none;\n  min-width: 20px;\n  padding: 2px 6px;\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface-3);\n  color: var(--jl-text-2);\n  font-size: 11px;\n  font-weight: 650;\n  line-height: 14px;\n  text-align: center;\n}\n\n.item[aria-current=\"page\"] .item-badge {\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n}\n\n.expander jl-icon {\n  transition: transform var(--jl-fast) var(--jl-ease);\n}\n\n.chevron {\n  color: var(--jl-faint);\n  transition: transform var(--jl-fast) var(--jl-ease);\n}\n\n.entry.open > .item .chevron,\n.entry.open > .expander jl-icon {\n  transform: rotate(90deg);\n}\n\n/* The chevron of a parent that is also a link: its own button, over the end of the row. */\n.expander {\n  position: absolute;\n  top: 5px;\n  right: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\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.expander:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.entry:has(> .expander) > .item {\n  padding-right: 36px;\n}\n\n/* The rail: icons only, centred; labels stay for screen readers, and show as tooltips. */\n:host([collapsed]) .section-label {\n  height: 1px;\n  margin: 4px 10px;\n  padding: 0;\n  overflow: hidden;\n  background: var(--jl-line);\n  color: transparent;\n}\n\n:host([collapsed]) .section:first-child .section-label {\n  display: none;\n}\n\n:host([collapsed]) .item {\n  justify-content: center;\n  padding: 0;\n}\n\n:host([collapsed]) .item-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n}\n\n:host([collapsed]) .item-initial {\n  display: inline-flex;\n}\n\n:host([collapsed]) .item-badge {\n  position: absolute;\n  top: 5px;\n  right: 9px;\n  min-width: 0;\n  width: 8px;\n  height: 8px;\n  padding: 0;\n  overflow: hidden;\n  background: var(--jl-accent);\n  color: transparent;\n}\n\n:host([collapsed]) .children {\n  display: none;\n}\n";
+var jl_side_nav_default = ":host {\n  display: block;\n  width: var(--width, 248px);\n  height: 100%;\n  min-height: 0;\n  transition: width var(--jl-slow) var(--jl-ease);\n}\n\n:host([rail]) {\n  width: var(--rail-width, 60px);\n}\n\nnav {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  height: 100%;\n  padding: 12px 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n}\n\n/* The footer and the fold button keep to the bottom; the button is centred in the rail. */\n.bottom {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: auto;\n}\n\n.fold {\n  align-self: flex-start;\n}\n\n:host([rail]) .fold {\n  align-self: center;\n}\n\n.sections {\n  display: grid;\n  gap: 14px;\n}\n\n.section {\n  display: grid;\n  gap: 2px;\n}\n\n.section-label {\n  padding: 4px 10px 6px;\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 650;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.items,\n.children {\n  display: grid;\n  gap: 2px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.children {\n  margin-top: 2px;\n}\n\n.entry {\n  position: relative;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  min-height: 34px;\n  padding: 0 10px;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: none;\n  color: inherit;\n  font: inherit;\n  font-weight: 550;\n  text-align: start;\n  text-decoration: none;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.item[data-depth=\"1\"] {\n  padding-left: 36px;\n}\n\n.item[data-depth=\"2\"] {\n  padding-left: 50px;\n}\n\n.item[data-depth=\"3\"] {\n  padding-left: 64px;\n}\n\n.item:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.item[aria-current=\"page\"] {\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n.item.holds-active {\n  color: var(--jl-text);\n}\n\n.item-icon {\n  color: var(--jl-faint);\n}\n\n.item:hover .item-icon,\n.item.holds-active .item-icon {\n  color: var(--jl-text-2);\n}\n\n.item[aria-current=\"page\"] .item-icon {\n  color: var(--jl-accent);\n}\n\n.item-initial {\n  display: none;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface-3);\n  color: var(--jl-text-2);\n  font-size: 11px;\n  font-weight: 700;\n}\n\n/* Nested items without an icon line their labels up under their parent's label. */\n.item:not([data-depth=\"0\"]) .item-initial {\n  display: none;\n}\n.item-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.item-badge {\n  flex: none;\n  min-width: 20px;\n  padding: 2px 6px;\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface-3);\n  color: var(--jl-text-2);\n  font-size: 11px;\n  font-weight: 650;\n  line-height: 14px;\n  text-align: center;\n}\n\n.item[aria-current=\"page\"] .item-badge {\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n}\n\n.expander jl-icon {\n  transition: transform var(--jl-fast) var(--jl-ease);\n}\n\n.chevron {\n  color: var(--jl-faint);\n  transition: transform var(--jl-fast) var(--jl-ease);\n}\n\n.entry.open > .item .chevron,\n.entry.open > .expander jl-icon {\n  transform: rotate(90deg);\n}\n\n/* The chevron of a parent that is also a link: its own button, over the end of the row. */\n.expander {\n  position: absolute;\n  top: 5px;\n  right: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\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.expander:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.entry:has(> .expander) > .item {\n  padding-right: 36px;\n}\n\n/* The rail: icons only, centred; labels stay for screen readers, and show as tooltips. */\n:host([rail]) .section-label {\n  height: 1px;\n  margin: 4px 10px;\n  padding: 0;\n  overflow: hidden;\n  background: var(--jl-line);\n  color: transparent;\n}\n\n:host([rail]) .section:first-child .section-label {\n  display: none;\n}\n\n:host([rail]) .item {\n  justify-content: center;\n  padding: 0;\n}\n\n:host([rail]) .item-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n}\n\n:host([rail]) .item-initial {\n  display: inline-flex;\n}\n\n:host([rail]) .item-badge {\n  position: absolute;\n  top: 5px;\n  right: 9px;\n  min-width: 0;\n  width: 8px;\n  height: 8px;\n  padding: 0;\n  overflow: hidden;\n  background: var(--jl-accent);\n  color: transparent;\n}\n\n:host([rail]) .children {\n  display: none;\n}\n";
 export { jl_side_nav_default as default };

package/dist/organisms/jl-side-nav.d.ts

@@ -3,12 +3,15 @@ import type { SideNavSection } from '../types/jl-side-nav.types';
 /**
  * The navigation of an app, down its side: sections of items with icons, badges and nested items that open with
  * a chevron. `value` is the active item (its parents open to show it); `collapsed` makes it a rail of icons, with
- * the labels as tooltips. Items with an `href` are links; the others fire `select`.
+ * the labels as tooltips, and `collapsible` lets people fold and unfold it with a button at its bottom. Items with
+ * an `href` are links; the others fire `select`.
  */
 export declare class JlSideNav extends JlElement {
     static readonly selector = "jl-side-nav";
+    /** `collapse`: people folded the side nav into its rail (true) or unfolded it (false), for the app to remember. */
     readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
         select: string;
+        collapse: boolean;
     }>>;
     readonly sections: Readonly<Readonly<{
         get(): SideNavSection[];
@@ -24,6 +27,29 @@ export declare class JlSideNav extends JlElement {
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
+    /** Adds a button at the bottom that folds the side nav into its rail and unfolds it. */
+    readonly collapsible: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The fold button's text while the side nav is open. */
+    readonly collapseLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Its hint while the side nav is a rail. */
+    readonly expandLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /**
+     * Set by `jl-app-shell` while the side nav is its drawer, on a narrow screen: the drawer shows it whole, and its
+     * fold button hides, `collapsed` waiting for a wide screen again.
+     */
+    readonly inDrawer: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
     /** The name of the navigation for screen readers. */
     readonly label: Readonly<Readonly<{
         get(): string;
@@ -39,6 +65,12 @@ export declare class JlSideNav extends JlElement {
     /** Opens or closes a parent item. */
     toggleItem(id: string, force?: boolean): void;
     private onClick;
+    /** Whether it shows as the rail now: folded, and not in a drawer. */
+    private isRail;
+    private fold;
+    /** The rail, or the whole side nav: drawn again, said on the host (`rail`) for the styles and the page. */
+    private renderRail;
+    private renderFold;
     private choose;
     /** Up and Down move between the rows people can see, Right opens a parent, Left closes it or goes up to it. */
     private onKey;