@syware/jlib 0.4.0 → 0.5.1

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

@@ -0,0 +1,200 @@
+import { BASE_STYLES } from "../styles/shared.js";
+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 { JlButton } from "../atoms/jl-button.js";
+import { JlSkeleton } from "../atoms/jl-skeleton.js";
+import { JlEmpty } from "./jl-empty.js";
+import jl_load_state_default from "./jl-load-state.css_raw.js";
+import { css } from "@jadis/core";
+import { CircleAlert, RefreshCw } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-load-state.tsx
+registerIcons({
+	"circle-alert": CircleAlert,
+	refresh: RefreshCw
+});
+define(JlEmpty);
+var LOAD_STATES = [
+	"loading",
+	"ready",
+	"empty",
+	"error"
+];
+var LOAD_SKELETONS = [
+	"rows",
+	"cards",
+	"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;
+var MAX_COUNT = 24;
+var LINE_WIDTHS = [
+	"100%",
+	"92%",
+	"96%",
+	"70%"
+];
+/** The skeleton of each shape, `count` times. */
+var SKELETONS = {
+	cards: (count) => Array.from({ length: count }, () => /* @__PURE__ */ jsxs("div", {
+		class: "bone-card",
+		children: [
+			/* @__PURE__ */ jsx(JlSkeleton, {
+				shape: "rect",
+				height: "120px"
+			}),
+			/* @__PURE__ */ jsx(JlSkeleton, { width: "70%" }),
+			/* @__PURE__ */ jsx(JlSkeleton, { width: "45%" })
+		]
+	})),
+	lines: (count) => Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(JlSkeleton, { width: LINE_WIDTHS[index % LINE_WIDTHS.length] })),
+	rows: (count) => Array.from({ length: count }, () => /* @__PURE__ */ jsxs("div", {
+		class: "bone-row",
+		children: [/* @__PURE__ */ jsx(JlSkeleton, {
+			shape: "circle",
+			width: "32px",
+			height: "32px"
+		}), /* @__PURE__ */ jsxs("div", {
+			class: "bone-lines",
+			children: [/* @__PURE__ */ jsx(JlSkeleton, { width: "60%" }), /* @__PURE__ */ jsx(JlSkeleton, { width: "35%" })]
+		})]
+	}))
+};
+/**
+* What a list or a page shows while its data comes: nothing for a moment, then a skeleton shaped like it; then the
+* data (the default slot), what to say when there is none (slot `empty`, a `jl-empty`), or, when it failed, what
+* failed and Try again. `load()` fetches, draws and moves between the states; a later `load()` keeps what is shown
+* until the new data is there, so live updates do not flash. Or set `state` yourself.
+*/
+var JlLoadState = class extends JlElement {
+	static selector = "jl-load-state";
+	events = this.useEvents();
+	state = this.useChange("loading", (value) => this.renderState(value), {
+		attribute: "state",
+		parse: oneOf(LOAD_STATES, "loading")
+	});
+	/** The shape of the skeleton; slot `loading` takes one of the page's own instead. */
+	skeleton = this.useChange("rows", () => this.renderSkeleton(), {
+		attribute: "skeleton",
+		parse: oneOf(LOAD_SKELETONS, "rows")
+	});
+	/** How many rows, cards or lines the skeleton has. */
+	count = this.useChange(DEFAULT_COUNT, () => this.renderSkeleton(), {
+		attribute: "count",
+		parse: clampedNumber(DEFAULT_COUNT, 1, MAX_COUNT)
+	});
+	/** Milliseconds before the skeleton shows. */
+	delay = this.useChange(DEFAULT_DELAY_MS, () => void 0, {
+		attribute: "delay",
+		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" });
+	_work = {};
+	_refs = this.useRefs((ref) => ({
+		bones: ref(".bones"),
+		content: ref(".content"),
+		empty: ref(".empty"),
+		error: ref("jl-empty"),
+		loading: ref(".loading"),
+		retry: ref(".retry")
+	}));
+	/**
+	* Fetches the data and draws it. The first time, and after a failure, the skeleton shows while it comes; later
+	* (a refresh), what is shown stays until the new data is there, and stays too if it fails. Resolves to whether it
+	* worked: a refresh that fails says so only here, for the page to tell people.
+	*/
+	async load(task) {
+		this._work.retry = () => this.load(task);
+		const showing = this.state.get() === "ready" || this.state.get() === "empty";
+		if (!showing) this.state.set("loading");
+		try {
+			const value = await task.fetch();
+			task.draw(value);
+			this.state.set(task.isEmpty?.(value) === true ? "empty" : "ready");
+			return true;
+		} catch {
+			if (!showing) this.state.set("error");
+			return false;
+		}
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "load-state",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					class: "loading",
+					hidden: true,
+					"aria-busy": "true",
+					children: /* @__PURE__ */ jsx("slot", {
+						name: "loading",
+						children: /* @__PURE__ */ jsx("div", { class: "bones" })
+					})
+				}),
+				/* @__PURE__ */ jsx("jl-empty", {
+					class: "error",
+					icon: "circle-alert",
+					heading: DEFAULT_ERROR_HEADING,
+					description: DEFAULT_ERROR_TEXT,
+					hidden: true,
+					children: /* @__PURE__ */ jsx(JlButton, {
+						class: "retry",
+						icon: "refresh",
+						label: DEFAULT_RETRY_LABEL
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "empty",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", { name: "empty" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "content",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", {})
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_load_state_default}`;
+	}
+	onConnect() {
+		this.renderSkeleton();
+		this.renderState(this.state.get());
+		this._refs.retry.events.register("press", () => {
+			this.events.emit("retry");
+			this._work.retry?.();
+		});
+	}
+	onDisconnect() {
+		clearTimeout(this._work.timer);
+	}
+	renderState(state) {
+		const refs = this._refs;
+		clearTimeout(this._work.timer);
+		refs.loading.hidden = true;
+		refs.error.hidden = state !== "error";
+		refs.empty.hidden = state !== "empty";
+		refs.content.hidden = state !== "ready";
+		this.reflect("state", state);
+		if (state === "loading") this._work.timer = setTimeout(() => {
+			refs.loading.hidden = false;
+		}, this.delay.get());
+	}
+	renderSkeleton() {
+		const kind = this.skeleton.get();
+		this._refs.bones.className = `bones ${kind}`;
+		this._refs.bones.replaceChildren(...SKELETONS[kind](this.count.get()));
+	}
+};
+JlLoadState.register();
+export { JlLoadState, LOAD_SKELETONS, LOAD_STATES };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-search-button.css?raw
+var jl_search_button_default = ":host {\n  display: block;\n}\n\n.search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: var(--jl-control-sm);\n  padding: 0 6px 0 10px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  cursor: pointer;\n  transition: border-color var(--jl-fast) var(--jl-ease);\n}\n\n.search:hover {\n  border-color: var(--jl-line-strong);\n  color: var(--jl-text-2);\n}\n\n.text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Folded: the icon alone, as square as a control. */\n:host([compact]) {\n  display: inline-block;\n}\n\n:host([compact]) .search {\n  justify-content: center;\n  width: var(--jl-control-sm);\n  padding: 0;\n}\n\n:host([compact]) .text,\n:host([compact]) jl-kbd {\n  display: none;\n}\n\n/* Touch screens have no keys to press. */\n@media (pointer: coarse) {\n  jl-kbd {\n    display: none;\n  }\n}\n";
+export { jl_search_button_default as default };

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

@@ -0,0 +1,34 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * What opens an app's command palette: it looks like a search field, with the palette's keys (Ctrl K, ⌘K on a
+ * Mac). `compact` keeps the icon alone, for a folded side nav or a phone's top bar. Listen to `press`; the keys are
+ * the palette's own (`jl-command-palette` listens to them), the button only shows them.
+ */
+export declare class JlSearchButton extends JlElement {
+    static readonly selector = "jl-search-button";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        press: undefined;
+    }>>;
+    /** The text, and the button's name: "Search". */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The keys that open the palette, as `jl-kbd` writes them: `mod+k`; `none` for no keys. */
+    readonly hotkey: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The icon alone, the label as its tooltip. */
+    readonly compact: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private renderLabel;
+    private renderHotkey;
+}

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

@@ -0,0 +1,80 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { registerIcons } from "../lib/icons.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { JlKbd } from "../atoms/jl-kbd.js";
+import { parseShortcut, shortcutAria } from "../lib/key-shortcut.js";
+import jl_search_button_default from "./jl-search-button.css_raw.js";
+import { css } from "@jadis/core";
+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;
+var MAC_PATTERN = /Mac|iPhone|iPad|iPod/;
+var isMac = () => MAC_PATTERN.test(navigator.userAgent);
+/**
+* What opens an app's command palette: it looks like a search field, with the palette's keys (Ctrl K, ⌘K on a
+* Mac). `compact` keeps the icon alone, for a folded side nav or a phone's top bar. Listen to `press`; the keys are
+* the palette's own (`jl-command-palette` listens to them), the button only shows them.
+*/
+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" });
+	/** 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"),
+		text: ref(".text")
+	}));
+	focus(options) {
+		this._refs.button.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			class: "search",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx(JlIcon, {
+					name: "search",
+					size: ICON_SIZE
+				}),
+				/* @__PURE__ */ jsx("span", { class: "text" }),
+				/* @__PURE__ */ jsx(JlKbd, {})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_search_button_default}`;
+	}
+	onConnect() {
+		this.renderLabel();
+		this.renderHotkey();
+		this.on(this._refs.button, "click", () => this.events.emit("press"));
+	}
+	renderLabel() {
+		const label = this.label.get() || DEFAULT_LABEL;
+		this._refs.text.textContent = label;
+		this._refs.button.setAttribute("aria-label", label);
+		this._refs.button.title = label;
+	}
+	renderHotkey() {
+		const text = this.hotkey.get();
+		const shortcut = text === NO_HOTKEY ? null : parseShortcut(text);
+		this._refs.keys.keys.set(shortcut === null ? "" : text);
+		this._refs.keys.hidden = shortcut === null;
+		setOrRemove(this._refs.button, "aria-keyshortcuts", shortcut === null ? "" : shortcutAria(shortcut, isMac()));
+	}
+};
+JlSearchButton.register();
+export { JlSearchButton };

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

@@ -1,3 +1,3 @@
 // src/molecules/jl-tooltip.css?raw
-var jl_tooltip_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n/* Ink on the page's ground: dark on a light theme, light on a dark one. */\n.bubble {\n  max-width: min(260px, calc(100vw - 16px));\n  padding: 6px 9px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-text);\n  color: var(--jl-bg);\n  font-size: var(--jl-font-xs);\n  font-weight: 550;\n  line-height: 1.4;\n  box-shadow: var(--jl-shadow);\n  pointer-events: auto;\n}\n\n.arrow {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  border-radius: 1px;\n  background: inherit;\n  rotate: 45deg;\n}\n\n.bubble[data-placement^=\"top\"] .arrow {\n  top: 100%;\n  left: var(--arrow, 50%);\n  translate: -50% -50%;\n}\n\n.bubble[data-placement^=\"bottom\"] .arrow {\n  bottom: 100%;\n  left: var(--arrow, 50%);\n  translate: -50% 50%;\n}\n\n.bubble[data-placement^=\"left\"] .arrow {\n  top: var(--arrow, 50%);\n  left: 100%;\n  translate: -50% -50%;\n}\n\n.bubble[data-placement^=\"right\"] .arrow {\n  top: var(--arrow, 50%);\n  right: 100%;\n  translate: 50% -50%;\n}\n";
+var jl_tooltip_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  /* A long press shows the bubble: no callout over it, and (below) no text selected under the finger. */\n  -webkit-touch-callout: none;\n}\n\n@media (pointer: coarse) {\n  ::slotted(*) {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n}\n\n/* Ink on the page's ground: dark on a light theme, light on a dark one. */\n.bubble {\n  max-width: min(260px, calc(100vw - 16px));\n  padding: 6px 9px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-text);\n  color: var(--jl-bg);\n  font-size: var(--jl-font-xs);\n  font-weight: 550;\n  line-height: 1.4;\n  box-shadow: var(--jl-shadow);\n  pointer-events: auto;\n}\n\n.arrow {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  border-radius: 1px;\n  background: inherit;\n  rotate: 45deg;\n}\n\n.bubble[data-placement^=\"top\"] .arrow {\n  top: 100%;\n  left: var(--arrow, 50%);\n  translate: -50% -50%;\n}\n\n.bubble[data-placement^=\"bottom\"] .arrow {\n  bottom: 100%;\n  left: var(--arrow, 50%);\n  translate: -50% 50%;\n}\n\n.bubble[data-placement^=\"left\"] .arrow {\n  top: var(--arrow, 50%);\n  left: 100%;\n  translate: -50% -50%;\n}\n\n.bubble[data-placement^=\"right\"] .arrow {\n  top: var(--arrow, 50%);\n  right: 100%;\n  translate: 50% -50%;\n}\n";
 export { jl_tooltip_default as default };

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

@@ -2,7 +2,13 @@ import { JlElement } from '../base/jl-element';
 import type { Placement } from '../types/floating.types';
 /**
  * A short hint in a dark bubble by its trigger (the slotted element): it shows on hover and on keyboard focus after
- * a `delay`, and hides on leave, blur and Escape. The trigger gets the text as its accessible description.
+ * a `delay`, and hides on leave, blur and Escape. The trigger gets the text as its accessible description. While
+ * the pointer or the focus is on it, the trigger's own `title` (a button's `hint`) is set aside, so the browser's
+ * tooltip does not show over the bubble.
+ *
+ * Touch screens have no hover: pressing and holding a trigger shows the bubble (and the press does not act), and
+ * it stays a moment after the finger lifts; a trigger that does nothing on a tap (a word, an icon) shows or hides
+ * it on a tap.
  */
 export declare class JlTooltip extends JlElement {
     static readonly selector = "jl-tooltip";
@@ -31,6 +37,25 @@ export declare class JlTooltip extends JlElement {
     /** Hides the bubble now. */
     hide(): void;
     private close;
+    /** A trigger that acts on a tap (a button, a link, a field), as opposed to a word or an icon. */
+    private isInteractive;
+    private pressStart;
+    private pressMove;
+    /** The finger lifted, or the page took it to scroll: a bubble the press showed stays a moment, then goes. */
+    private pressEnd;
+    /** The system's own long press: the bubble shows now, and the menu it would open does not, but over a link. */
+    private pressHeld;
+    private openFromPress;
+    private swallowLongPress;
+    private hideBubble;
+    /**
+     * Sets aside the native `title` of the trigger and of its inner control: the bubble says it, and the browser's
+     * own tooltip would show over it a moment later. The control keeps its name for screen readers (a button's hint
+     * is its `aria-label` too).
+     */
+    private holdTitles;
+    /** Gives the titles back, unless the trigger wrote new ones meanwhile. */
+    private restoreTitles;
     private trigger;
     private isOpen;
     private scheduleShow;

package/dist/molecules/jl-tooltip.js

@@ -14,10 +14,22 @@ var HIDE_GRACE_MS = 120;
 var GAP = 9;
 var ARROW_MARGIN = 10;
 var DESCRIPTION = "aria-description";
+var TITLE = "title";
+var TOUCH = "touch";
+var LONG_PRESS_MS = 500;
+var MOVE_TOLERANCE_PX = 10;
+var TOUCH_LINGER_MS = 1500;
+var INTERACTIVE = "a[href], button, input, select, textarea, summary, [role=\"button\"], [role=\"link\"]";
 var sideOf = (placement) => placement.split("-")[0];
 /**
 * A short hint in a dark bubble by its trigger (the slotted element): it shows on hover and on keyboard focus after
-* a `delay`, and hides on leave, blur and Escape. The trigger gets the text as its accessible description.
+* a `delay`, and hides on leave, blur and Escape. The trigger gets the text as its accessible description. While
+* the pointer or the focus is on it, the trigger's own `title` (a button's `hint`) is set aside, so the browser's
+* tooltip does not show over the bubble.
+*
+* Touch screens have no hover: pressing and holding a trigger shows the bubble (and the press does not act), and
+* it stays a moment after the finger lifts; a trigger that does nothing on a tap (a word, an icon) shows or hides
+* it on a tap.
 */
 var JlTooltip = class extends JlElement {
 	static selector = "jl-tooltip";
@@ -35,7 +47,15 @@ var JlTooltip = class extends JlElement {
 	_state = {
 		described: null,
 		following: new AbortController(),
+		heldTitles: [],
 		hideTimer: 0,
+		press: {
+			down: false,
+			opened: false,
+			timer: 0,
+			x: 0,
+			y: 0
+		},
 		showTimer: 0
 	};
 	_refs = this.useRefs((ref) => ({
@@ -58,11 +78,34 @@ var JlTooltip = class extends JlElement {
 	onConnect() {
 		this.describeTrigger();
 		this.on(this._refs.slot, "slotchange", () => this.describeTrigger());
-		this.on(this, "pointerenter", () => this.scheduleShow());
-		this.on(this, "pointerleave", () => this.scheduleHide());
-		this.on(this, "pointerdown", () => this.close());
+		this.on(this, "pointerenter", (event) => {
+			if (event.pointerType === TOUCH) return;
+			this.holdTitles();
+			this.scheduleShow();
+		});
+		this.on(this, "pointerleave", (event) => {
+			if (event.pointerType !== TOUCH) this.scheduleHide();
+		});
+		this.on(this, "pointerdown", (event) => {
+			if (event.pointerType === TOUCH) {
+				this.pressStart(event);
+				return;
+			}
+			this.hideBubble();
+		});
+		this.on(this, "pointermove", (event) => this.pressMove(event));
+		this.on(this, "pointerup", () => this.pressEnd());
+		this.on(this, "pointercancel", () => this.pressEnd());
+		this.on(this, "contextmenu", (event) => this.pressHeld(event));
+		this.addEventListener("click", (event) => this.swallowLongPress(event), {
+			capture: true,
+			signal: this.killSignal
+		});
 		this.on(this, "focusin", () => {
-			if (deepActiveElement(document)?.matches(":focus-visible") === true) this.scheduleShow();
+			if (deepActiveElement(document)?.matches(":focus-visible") === true) {
+				this.holdTitles();
+				this.scheduleShow();
+			}
 		});
 		this.on(this, "focusout", () => this.close());
 	}
@@ -78,12 +121,93 @@ var JlTooltip = class extends JlElement {
 		this.whenRendered(() => this.close());
 	}
 	close() {
+		this.hideBubble();
+		this.restoreTitles();
+	}
+	/** A trigger that acts on a tap (a button, a link, a field), as opposed to a word or an icon. */
+	isInteractive() {
+		return accessibleTarget(this.trigger()).matches(INTERACTIVE);
+	}
+	pressStart(event) {
+		const press = this._state.press;
+		window.clearTimeout(press.timer);
+		press.opened = false;
+		if (!this.isInteractive()) {
+			if (this.isOpen()) {
+				this.close();
+				return;
+			}
+			this.open();
+			return;
+		}
+		press.down = true;
+		press.x = event.clientX;
+		press.y = event.clientY;
+		press.timer = window.setTimeout(() => this.openFromPress(), LONG_PRESS_MS);
+	}
+	pressMove(event) {
+		const press = this._state.press;
+		const moved = Math.hypot(event.clientX - press.x, event.clientY - press.y);
+		if (press.down && moved > MOVE_TOLERANCE_PX) window.clearTimeout(press.timer);
+	}
+	/** The finger lifted, or the page took it to scroll: a bubble the press showed stays a moment, then goes. */
+	pressEnd() {
+		const press = this._state.press;
+		window.clearTimeout(press.timer);
+		press.down = false;
+		if (!press.opened) return;
+		window.clearTimeout(this._state.hideTimer);
+		this._state.hideTimer = window.setTimeout(() => this.close(), TOUCH_LINGER_MS);
+	}
+	/** The system's own long press: the bubble shows now, and the menu it would open does not, but over a link. */
+	pressHeld(event) {
+		if (!this._state.press.down || !this.isInteractive()) return;
+		this.openFromPress();
+		if (!accessibleTarget(this.trigger()).matches("a[href]")) event.preventDefault();
+	}
+	openFromPress() {
+		window.clearTimeout(this._state.press.timer);
+		this._state.press.opened = true;
+		this.open();
+	}
+	swallowLongPress(event) {
+		const press = this._state.press;
+		if (!press.opened) return;
+		press.opened = false;
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	hideBubble() {
 		window.clearTimeout(this._state.showTimer);
 		window.clearTimeout(this._state.hideTimer);
 		this._state.following.abort();
 		const bubble = this._refs.bubble;
 		if (bubble.matches(":popover-open")) bubble.hidePopover();
 	}
+	/**
+	* Sets aside the native `title` of the trigger and of its inner control: the bubble says it, and the browser's
+	* own tooltip would show over it a moment later. The control keeps its name for screen readers (a button's hint
+	* is its `aria-label` too).
+	*/
+	holdTitles() {
+		if (this.text.get() === "" || this._state.heldTitles.length > 0) return;
+		const trigger = this.trigger();
+		const elements = [.../* @__PURE__ */ new Set([trigger, accessibleTarget(trigger)])];
+		this._state.heldTitles = elements.flatMap((element) => {
+			const title = element.getAttribute(TITLE);
+			if (title === null) return [];
+			element.removeAttribute(TITLE);
+			return [{
+				element,
+				title
+			}];
+		});
+	}
+	/** Gives the titles back, unless the trigger wrote new ones meanwhile. */
+	restoreTitles() {
+		for (const { element, title } of this._state.heldTitles) if (!element.hasAttribute(TITLE)) element.setAttribute(TITLE, title);
+		this._state.heldTitles = [];
+	}
 	trigger() {
 		return this._refs.slot.assignedElements({ flatten: true })[0] ?? this;
 	}
@@ -117,6 +241,9 @@ var JlTooltip = class extends JlElement {
 			passive: true,
 			signal: following.signal
 		});
+		document.addEventListener("pointerdown", (event) => {
+			if (!event.composedPath().includes(this)) this.close();
+		}, { signal: following.signal });
 		document.addEventListener("keydown", (event) => {
 			if (event.key === "Escape") this.close();
 		}, { signal: following.signal });

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

@@ -1,5 +1,5 @@
 import { JlElement } from '../base/jl-element';
-import type { ConfirmOptions, ConfirmTone } from '../types/jl-confirm.types';
+import type { ConfirmOptions, ConfirmTone, LeaveGuardOptions } from '../types/jl-confirm.types';
 export declare const CONFIRM_TONES: readonly ConfirmTone[];
 /**
  * A yes-or-no question in a small modal dialog. `ask()` opens it and resolves `true` on confirm, `false` on cancel,
@@ -54,3 +54,9 @@ export declare class JlConfirm extends JlElement {
  * ```
  */
 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.
+ */
+export declare function guardLeave(options: LeaveGuardOptions): () => Promise<boolean>;

package/dist/organisms/jl-confirm.js

@@ -129,4 +129,25 @@ function confirmDialog(options) {
 	document.body.append(element);
 	return element.ask().finally(() => element.remove());
 }
-export { CONFIRM_TONES, JlConfirm, confirmDialog };
+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.
+*/
+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"
+	});
+}
+export { CONFIRM_TONES, JlConfirm, confirmDialog, guardLeave };

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

@@ -24,7 +24,10 @@ export declare class JlToaster extends JlElement {
     }>>;
     private readonly _watched;
     private readonly _refs;
-    /** Shows a notification; `duration` is 5 seconds unless given, and it has a close button unless told not to. */
+    /**
+     * Shows a notification. It stays 5 seconds unless `duration` says otherwise, 8 for an error or with an action;
+     * it has a close button unless told not to.
+     */
     notify(options: ToastOptions): ToastHandle;
     templateHtml(): Node;
     templateCss(): string;

package/dist/organisms/jl-toaster.js

@@ -16,8 +16,12 @@ var TOASTER_PLACEMENTS = [
 var DEFAULT_MAX = 3;
 var MAX_LIMIT = 20;
 var DEFAULT_DURATION = 5e3;
+var LONG_DURATION = 8e3;
+var LONG_TONE = "danger";
 var DEFAULT_LABEL = "Notifications";
 var STACKED = "data-stacked";
+/** How long a toast stays when its options do not say: longer for an error, or to give time to press its action. */
+var defaultDuration = (options) => options.tone === LONG_TONE || (options.actionLabel ?? "") !== "" ? LONG_DURATION : DEFAULT_DURATION;
 var OPEN = ":popover-open";
 /**
 * The corner of the window where notifications stack, newest nearest the edge, at most `max` at a time. It lives in
@@ -42,14 +46,17 @@ var JlToaster = class extends JlElement {
 		region: ref(".region"),
 		slot: ref("slot")
 	}));
-	/** Shows a notification; `duration` is 5 seconds unless given, and it has a close button unless told not to. */
+	/**
+	* Shows a notification. It stays 5 seconds unless `duration` says otherwise, 8 for an error or with an action;
+	* it has a close button unless told not to.
+	*/
 	notify(options) {
 		const toast = /* @__PURE__ */ jsx(JlToast, {
 			heading: options.heading,
 			text: options.text,
 			tone: options.tone,
 			icon: options.icon,
-			duration: options.duration ?? DEFAULT_DURATION,
+			duration: options.duration ?? defaultDuration(options),
 			closable: options.closable ?? true,
 			actionLabel: options.actionLabel
 		});

package/dist/styles/control.css_raw.js

@@ -1,3 +1,3 @@
 // src/styles/control.css?raw
-var control_default = "/* The look of the fields people type in: text fields, selects and areas share it. */\n.control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  min-height: var(--height, var(--jl-control-md));\n  padding: 0 12px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.control:hover {\n  border-color: color-mix(in srgb, var(--jl-line-strong) 60%, var(--jl-text) 18%);\n}\n\n.control:focus-within {\n  border-color: var(--jl-accent);\n  box-shadow: var(--jl-focus-ring);\n}\n\n:host([invalid]) .control {\n  border-color: var(--jl-danger);\n}\n\n:host([invalid]) .control:focus-within {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-danger) 25%, transparent);\n}\n\n:host([disabled]) .control,\n:host(:disabled) .control {\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  cursor: not-allowed;\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n}\n\n/* The native element inside the frame: it takes the room and leaves the frame to draw the border. */\n.native {\n  flex: 1;\n  min-width: 0;\n  height: calc(var(--height, var(--jl-control-md)) - 2px);\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n\n.native::placeholder {\n  color: var(--jl-faint);\n}\n\n.native:focus-visible {\n  box-shadow: none;\n}\n\n.native:disabled {\n  cursor: not-allowed;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  color: var(--jl-faint);\n}\n\n/* A small button inside the frame: clear, reveal the password, step a number. */\n.action {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  margin-right: -4px;\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.action:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n";
+var control_default = "/* The look of the fields people type in: text fields, selects and areas share it. */\n.control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  min-height: var(--height, var(--jl-control-md));\n  padding: 0 12px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-control-font);\n  line-height: 20px;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.control:hover {\n  border-color: color-mix(in srgb, var(--jl-line-strong) 60%, var(--jl-text) 18%);\n}\n\n.control:focus-within {\n  border-color: var(--jl-accent);\n  box-shadow: var(--jl-focus-ring);\n}\n\n:host([invalid]) .control {\n  border-color: var(--jl-danger);\n}\n\n:host([invalid]) .control:focus-within {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-danger) 25%, transparent);\n}\n\n:host([disabled]) .control,\n:host(:disabled) .control {\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  cursor: not-allowed;\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n}\n\n/* The native element inside the frame: it takes the room and leaves the frame to draw the border. */\n.native {\n  flex: 1;\n  min-width: 0;\n  height: calc(var(--height, var(--jl-control-md)) - 2px);\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n\n.native::placeholder {\n  color: var(--jl-faint);\n}\n\n.native:focus-visible {\n  box-shadow: none;\n}\n\n.native:disabled {\n  cursor: not-allowed;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  color: var(--jl-faint);\n}\n\n/* A small button inside the frame: clear, reveal the password, step a number. */\n.action {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  margin-right: -4px;\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.action:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n";
 export { control_default as default };