@syware/jlib 0.5.0 → 0.6.0

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

@@ -3,8 +3,8 @@ 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 { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import { clamp, parseNumber, stepValue } from "../lib/numeric.js";
 import jl_number_input_default from "./jl-number-input.css_raw.js";
 import { css } from "@jadis/core";

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

@@ -1,8 +1,8 @@
 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 { setOrRemove } from "../lib/dom.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";

package/dist/molecules/jl-search.js

@@ -3,8 +3,8 @@ 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 { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import { JlSpinner } from "../atoms/jl-spinner.js";
 import { hasCommandModifier, matchesShortcut, parseShortcut, shortcutAria, shortcutLabels } from "../lib/key-shortcut.js";
 import jl_search_default from "./jl-search.css_raw.js";

package/dist/molecules/jl-segmented.js

@@ -2,8 +2,8 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlFormControl } from "../base/jl-form-control.js";
 import { jsonOf, oneOf } from "../lib/attributes.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove } from "../lib/dom.js";
 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 jl_segmented_default from "./jl-segmented.css_raw.js";

package/dist/molecules/jl-tabs.js

@@ -2,8 +2,8 @@ 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 { setOrRemove, uniqueId } from "../lib/dom.js";
 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 { JlTabPanel } from "./jl-tab-panel.js";

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

@@ -4,8 +4,8 @@ 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 { setOrRemove, uniqueId } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { keepInView } from "../lib/keep-in-view.js";
 import { filterOptions, matchParts, nextEnabledIndex } from "../lib/option-filter.js";
 import { addTags, hasTag, hasTagSeparator, splitTags } from "../lib/tags.js";

package/dist/molecules/jl-timeline.js

@@ -1,8 +1,8 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { jsonOf } from "../lib/attributes.js";
-import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import jl_timeline_default from "./jl-timeline.css_raw.js";
 import { css } from "@jadis/core";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";

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,28 @@ 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. On a trigger that does nothing else on a tap, a tap (not a scroll) shows or hides the bubble. */
+    private pressUp;
+    /** The finger is gone: a bubble the long 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;
+    /** The long press shows the bubble, and says whether there is one: without a text, the press stays a press. */
+    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,16 @@ var JlTooltip = class extends JlElement {
 	_state = {
 		described: null,
 		following: new AbortController(),
+		heldTitles: [],
 		hideTimer: 0,
+		press: {
+			down: false,
+			moved: false,
+			opened: false,
+			timer: 0,
+			x: 0,
+			y: 0
+		},
 		showTimer: 0
 	};
 	_refs = this.useRefs((ref) => ({
@@ -58,11 +79,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.pressUp());
+		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 +122,104 @@ 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.down = true;
+		press.moved = false;
+		press.opened = false;
+		press.x = event.clientX;
+		press.y = event.clientY;
+		if (this.isInteractive()) 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) {
+			press.moved = true;
+			window.clearTimeout(press.timer);
+		}
+	}
+	/** The finger lifted. On a trigger that does nothing else on a tap, a tap (not a scroll) shows or hides the bubble. */
+	pressUp() {
+		const press = this._state.press;
+		const tapped = press.down && !press.moved;
+		this.pressEnd();
+		if (!tapped || this.isInteractive()) return;
+		if (this.isOpen()) {
+			this.close();
+			return;
+		}
+		this.open();
+	}
+	/** The finger is gone: a bubble the long 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;
+		if (this.openFromPress() && !accessibleTarget(this.trigger()).matches("a[href]")) event.preventDefault();
+	}
+	/** The long press shows the bubble, and says whether there is one: without a text, the press stays a press. */
+	openFromPress() {
+		window.clearTimeout(this._state.press.timer);
+		if (this.text.get() === "") return false;
+		this._state.press.opened = true;
+		this.open();
+		return true;
+	}
+	swallowLongPress(event) {
+		const press = this._state.press;
+		if (!press.opened) return;
+		press.opened = false;
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	hideBubble() {
+		window.clearTimeout(this._state.press.timer);
 		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 +253,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-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  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\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.js

@@ -2,8 +2,8 @@ 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 { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import { highlightSegments } from "../lib/fuzzy.js";
 import { hotkeyLabels, isApplePlatform, matchesHotkey, parseHotkey } from "../lib/hotkey.js";
 import { groupMatches, matchCommands } from "../lib/palette.js";

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

@@ -136,18 +136,26 @@ 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 ?? STAY_LABEL,
+			confirmLabel: options.leaveLabel ?? LEAVE_LABEL,
+			heading: options.heading ?? LEAVE_HEADING,
+			text: options.text ?? LEAVE_TEXT,
+			tone: "danger"
+		}).finally(() => {
+			asking.pending = null;
+		});
+		return asking.pending;
+	};
 }
 export { CONFIRM_TONES, JlConfirm, confirmDialog, guardLeave };

package/dist/organisms/jl-flow.js

@@ -2,8 +2,8 @@ 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 { 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";

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

@@ -2,8 +2,8 @@ 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, uniqueId } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { findItem, firstLeaf, pathInSections } from "../lib/nav-tree.js";
 import jl_side_nav_default from "./jl-side-nav.css_raw.js";
 import { css } from "@jadis/core";

package/dist/organisms/jl-tab-bar.js

@@ -2,8 +2,8 @@ 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 { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import jl_tab_bar_default from "./jl-tab-bar.css_raw.js";
 import { css } from "@jadis/core";
 import { Ellipsis } from "lucide";

package/dist/organisms/jl-table.js

@@ -2,8 +2,8 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { jsonOf, oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
-import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import { JlBadge } from "../atoms/jl-badge.js";
 import { columnAlign, columnWidth, formatCell, nextSortDirection, rowKeyOf, selectionState, sortRows, toggleAll, toggleKey } from "../lib/table.js";
 import jl_table_default from "./jl-table.css_raw.js";

package/dist/organisms/jl-toaster.css_raw.js

@@ -1,3 +1,3 @@
 // src/organisms/jl-toaster.css?raw
-var jl_toaster_default = ":host {\n  display: contents;\n  --edge: 16px;\n  --width: 380px;\n}\n\n.region {\n  position: fixed;\n  inset: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: min(var(--width), calc(100vw - 2 * var(--edge)));\n  margin: 0;\n  padding: 0;\n  overflow: visible;\n  border: none;\n  background: none;\n  color: var(--jl-text);\n  /* The empty space between toasts lets clicks through to the page. */\n  pointer-events: none;\n}\n\n.region:not(:popover-open) {\n  display: none;\n}\n\n::slotted(*) {\n  pointer-events: auto;\n}\n\n::slotted([data-stacked]) {\n  display: none;\n}\n\n:host([placement=\"bottom-right\"]) .region {\n  right: var(--edge);\n  bottom: var(--edge);\n}\n\n:host([placement=\"bottom-left\"]) .region {\n  bottom: var(--edge);\n  left: var(--edge);\n}\n\n:host([placement=\"bottom-center\"]) .region {\n  bottom: var(--edge);\n  left: 50%;\n  translate: -50% 0;\n}\n\n/* At the top, the newest toast is the highest one, and toasts come in from above. */\n:host([placement^=\"top\"]) .region {\n  top: var(--edge);\n  flex-direction: column-reverse;\n}\n\n:host([placement^=\"top\"]) ::slotted(*) {\n  --jl-toast-enter: -8px;\n}\n\n:host([placement=\"top-right\"]) .region {\n  right: var(--edge);\n}\n\n:host([placement=\"top-center\"]) .region {\n  left: 50%;\n  translate: -50% 0;\n}\n";
+var jl_toaster_default = ":host {\n  display: contents;\n  --edge: 16px;\n  --width: 380px;\n}\n\n/* The bottom placements keep above the tab bar of an app shell (--jl-shell-bottom), or --edge-bottom when given. */\n.region {\n  --bottom: var(--edge-bottom, calc(var(--edge) + var(--jl-shell-bottom, 0px)));\n}\n\n.region {\n  position: fixed;\n  inset: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: min(var(--width), calc(100vw - 2 * var(--edge)));\n  margin: 0;\n  padding: 0;\n  overflow: visible;\n  border: none;\n  background: none;\n  color: var(--jl-text);\n  /* The empty space between toasts lets clicks through to the page. */\n  pointer-events: none;\n}\n\n.region:not(:popover-open) {\n  display: none;\n}\n\n::slotted(*) {\n  pointer-events: auto;\n}\n\n::slotted([data-stacked]) {\n  display: none;\n}\n\n:host([placement=\"bottom-right\"]) .region {\n  right: var(--edge);\n  bottom: var(--bottom);\n}\n\n:host([placement=\"bottom-left\"]) .region {\n  bottom: var(--bottom);\n  left: var(--edge);\n}\n\n:host([placement=\"bottom-center\"]) .region {\n  bottom: var(--bottom);\n  left: 50%;\n  translate: -50% 0;\n}\n\n/* At the top, the newest toast is the highest one, and toasts come in from above. */\n:host([placement^=\"top\"]) .region {\n  top: var(--edge);\n  flex-direction: column-reverse;\n}\n\n:host([placement^=\"top\"]) ::slotted(*) {\n  --jl-toast-enter: -8px;\n}\n\n:host([placement=\"top-right\"]) .region {\n  right: var(--edge);\n}\n\n:host([placement=\"top-center\"]) .region {\n  left: 50%;\n  translate: -50% 0;\n}\n";
 export { jl_toaster_default as default };

package/dist/organisms/jl-tree.js

@@ -2,8 +2,8 @@ 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, uniqueId } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { allItems, isFolder, treeKeyAction, withExpanded } from "../lib/tree.js";
 import jl_tree_default from "./jl-tree.css_raw.js";
 import { css } from "@jadis/core";

package/dist/styles/tokens.css_raw.js

@@ -1,3 +1,3 @@
 // src/styles/tokens.css?raw
-var tokens_default = "/*\n * The design tokens, as swai and swcode have them: ink and white, flat surfaces separated by lines, and one blue\n * that marks what is live, selected or waiting for a person. Custom properties cross shadow roots, so every\n * component reads them. They sit in the `jlib` layer: any unlayered rule of the page overrides them.\n */\n@layer jlib {\n  :root,\n  [data-theme=\"light\"] {\n    color-scheme: light;\n    --jl-font-sans: \"Manrope Variable\", \"Manrope\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    --jl-font-mono: \"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n\n    --jl-font-xs: 12px;\n    --jl-font-sm: 13px;\n    --jl-font-md: 14px;\n    --jl-font-lg: 16px;\n    --jl-font-xl: 20px;\n    --jl-font-2xl: 28px;\n\n    --jl-text: #0b0b0c;\n    --jl-text-2: #3a3f47;\n    /* Secondary text: 6.2:1 on white. */\n    --jl-muted: #5b616b;\n    /* Icons and decorations only: 3.2:1 on white is enough for them, not for text. */\n    --jl-faint: #8a9099;\n\n    --jl-bg: #ffffff;\n    --jl-surface: #ffffff;\n    --jl-surface-2: #f7f8f9;\n    --jl-surface-3: #eef0f2;\n    --jl-code-bg: #f0f2f4;\n    --jl-line: #e6e8eb;\n    --jl-line-soft: #eef0f2;\n    --jl-line-strong: #d5d9de;\n\n    /* The SyWare logo's blue: marks, focus rings, progress. 3.8:1 on white: enough for shapes, never for text. */\n    --jl-brand: #0e88d3;\n    /* The same hue, deep enough to carry text: buttons, links, the selection. 5.2:1 on white. */\n    --jl-accent: #0c72b0;\n    --jl-accent-strong: #095a8b;\n    --jl-accent-soft: #e9f4fb;\n    --jl-accent-line: #b7dbf2;\n    --jl-on-accent: #ffffff;\n\n    --jl-ok: #17784a;\n    --jl-ok-soft: #ecf6f0;\n    --jl-warn: #9a5b00;\n    --jl-warn-soft: #fcf4e6;\n    --jl-danger: #b42318;\n    --jl-danger-soft: #fdf0ef;\n    --jl-on-danger: #ffffff;\n    --jl-info: #0c72b0;\n    --jl-info-soft: #e9f4fb;\n\n    /* Code: the accent for keywords, quiet colours from the same family for the rest. */\n    --jl-code-keyword: #0c72b0;\n    --jl-code-tag: #095a8b;\n    --jl-code-attribute: #5b48c8;\n    --jl-code-string: #17784a;\n    --jl-code-number: #9a5b00;\n    --jl-code-function: #3d5a80;\n    --jl-code-property: #127a72;\n    --jl-code-comment: #8a9099;\n\n    --jl-radius-xs: 6px;\n    --jl-radius-sm: 8px;\n    --jl-radius: 10px;\n    --jl-radius-lg: 12px;\n    --jl-radius-xl: 20px;\n    --jl-radius-pill: 999px;\n\n    /* Spacing: a 4px grid, for the layouts pages build around the components. */\n    --jl-space-1: 4px;\n    --jl-space-2: 8px;\n    --jl-space-3: 12px;\n    --jl-space-4: 16px;\n    --jl-space-5: 20px;\n    --jl-space-6: 24px;\n    --jl-space-8: 32px;\n    --jl-space-10: 40px;\n    --jl-space-12: 48px;\n    --jl-space-16: 64px;\n\n    --jl-control-sm: 30px;\n    --jl-control-md: 36px;\n    --jl-control-lg: 44px;\n    /* The text people type in fields. */\n    --jl-control-font: var(--jl-font-md);\n\n    /* The widest a page gets: a form, most pages, and the tables and grids that need the room. */\n    --jl-page-form: 720px;\n    --jl-page-standard: 1120px;\n    --jl-page-wide: 1400px;\n\n    /* Flat: lines separate; only what floats (menus, dialogs, toasts) casts a shadow. */\n    --jl-shadow-sm: 0 1px 2px rgb(11 11 12 / 0.05);\n    --jl-shadow: 0 6px 16px -6px rgb(11 11 12 / 0.12);\n    --jl-shadow-lg: 0 18px 44px -14px rgb(11 11 12 / 0.22);\n    --jl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jl-brand) 35%, transparent);\n    --jl-scrim: rgb(11 11 12 / 0.38);\n\n    --jl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);\n    --jl-fast: 120ms;\n    --jl-slow: 240ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme=\"light\"]) {\n      color-scheme: dark;\n      --jl-text: #eceef1;\n      --jl-text-2: #c3c8cf;\n      --jl-muted: #959ca6;\n      --jl-faint: #6b727c;\n      --jl-bg: #0f1113;\n      --jl-surface: #0f1113;\n      --jl-surface-2: #16191c;\n      --jl-surface-3: #1d2125;\n      --jl-code-bg: #1d2125;\n      --jl-line: #262a2f;\n      --jl-line-soft: #1f2327;\n      --jl-line-strong: #343a41;\n      --jl-brand: #1a9be0;\n      --jl-accent: #3ea6e8;\n      --jl-accent-strong: #6cc0f2;\n      --jl-accent-soft: #0f2a3b;\n      --jl-accent-line: #1e4a66;\n      --jl-on-accent: #04131c;\n      --jl-ok: #4cc38a;\n      --jl-ok-soft: #10261c;\n      --jl-warn: #e5a54b;\n      --jl-warn-soft: #2a2012;\n      --jl-danger: #f0786c;\n      --jl-danger-soft: #3a1a17;\n      --jl-on-danger: #1c0604;\n      --jl-info: #3ea6e8;\n      --jl-info-soft: #0f2a3b;\n      --jl-code-keyword: #3ea6e8;\n      --jl-code-tag: #6cc0f2;\n      --jl-code-attribute: #a99bf0;\n      --jl-code-string: #4cc38a;\n      --jl-code-number: #e5a54b;\n      --jl-code-function: #8fb0d6;\n      --jl-code-property: #4fc1b5;\n      --jl-code-comment: #6b727c;\n      --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n      --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n      --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n      --jl-scrim: rgb(0 0 0 / 0.55);\n    }\n  }\n\n  /* Dark: the same blue, lifted to read on a dark ground, with dark text on the buttons. */\n  [data-theme=\"dark\"] {\n    color-scheme: dark;\n    --jl-text: #eceef1;\n    --jl-text-2: #c3c8cf;\n    --jl-muted: #959ca6;\n    --jl-faint: #6b727c;\n    --jl-bg: #0f1113;\n    --jl-surface: #0f1113;\n    --jl-surface-2: #16191c;\n    --jl-surface-3: #1d2125;\n    --jl-code-bg: #1d2125;\n    --jl-line: #262a2f;\n    --jl-line-soft: #1f2327;\n    --jl-line-strong: #343a41;\n    --jl-brand: #1a9be0;\n    --jl-accent: #3ea6e8;\n    --jl-accent-strong: #6cc0f2;\n    --jl-accent-soft: #0f2a3b;\n    --jl-accent-line: #1e4a66;\n    --jl-on-accent: #04131c;\n    --jl-ok: #4cc38a;\n    --jl-ok-soft: #10261c;\n    --jl-warn: #e5a54b;\n    --jl-warn-soft: #2a2012;\n    --jl-danger: #f0786c;\n    --jl-danger-soft: #3a1a17;\n    --jl-on-danger: #1c0604;\n    --jl-info: #3ea6e8;\n    --jl-info-soft: #0f2a3b;\n    --jl-code-keyword: #3ea6e8;\n    --jl-code-tag: #6cc0f2;\n    --jl-code-attribute: #a99bf0;\n    --jl-code-string: #4cc38a;\n    --jl-code-number: #e5a54b;\n    --jl-code-function: #8fb0d6;\n    --jl-code-property: #4fc1b5;\n    --jl-code-comment: #6b727c;\n    --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n    --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n    --jl-scrim: rgb(0 0 0 / 0.55);\n  }\n\n  /*\n   * Touch screens: controls a finger can hit (44px for most), and field text phones do not zoom into when it takes\n   * the focus (16px). Themed parts of a page re-declare the sizes, so they take these too.\n   */\n  @media (pointer: coarse) {\n    :root,\n    [data-theme=\"light\"],\n    [data-theme=\"dark\"] {\n      --jl-control-sm: 36px;\n      --jl-control-md: 44px;\n      --jl-control-lg: 48px;\n      --jl-control-font: 16px;\n    }\n  }\n}\n";
+var tokens_default = "/*\n * The design tokens, as swai and swcode have them: ink and white, flat surfaces separated by lines, and one blue\n * that marks what is live, selected or waiting for a person. Custom properties cross shadow roots, so every\n * component reads them. They sit in the `jlib` layer: any unlayered rule of the page overrides them.\n */\n@layer jlib {\n  :root,\n  [data-theme=\"light\"] {\n    color-scheme: light;\n    --jl-font-sans: \"Manrope Variable\", \"Manrope\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    --jl-font-mono: \"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n\n    --jl-font-xs: 12px;\n    --jl-font-sm: 13px;\n    --jl-font-md: 14px;\n    --jl-font-lg: 16px;\n    --jl-font-xl: 20px;\n    --jl-font-2xl: 28px;\n\n    --jl-text: #0b0b0c;\n    --jl-text-2: #3a3f47;\n    /* Secondary text: 6.2:1 on white. */\n    --jl-muted: #5b616b;\n    /* Icons and decorations only: 3.2:1 on white is enough for them, not for text. */\n    --jl-faint: #8a9099;\n\n    --jl-bg: #ffffff;\n    --jl-surface: #ffffff;\n    --jl-surface-2: #f7f8f9;\n    --jl-surface-3: #eef0f2;\n    --jl-code-bg: #f0f2f4;\n    --jl-line: #e6e8eb;\n    --jl-line-soft: #eef0f2;\n    --jl-line-strong: #d5d9de;\n\n    /* The SyWare logo's blue: marks, focus rings, progress. 3.8:1 on white: enough for shapes, never for text. */\n    --jl-brand: #0e88d3;\n    /* The same hue, deep enough to carry text: buttons, links, the selection. 5.2:1 on white. */\n    --jl-accent: #0c72b0;\n    --jl-accent-strong: #095a8b;\n    --jl-accent-soft: #e9f4fb;\n    --jl-accent-line: #b7dbf2;\n    --jl-on-accent: #ffffff;\n    /* What is drawn on the brand's blue, such as an app's icon: white in both themes, as a favicon is. */\n    --jl-on-brand: #ffffff;\n\n    --jl-ok: #17784a;\n    --jl-ok-soft: #ecf6f0;\n    --jl-warn: #9a5b00;\n    --jl-warn-soft: #fcf4e6;\n    --jl-danger: #b42318;\n    --jl-danger-soft: #fdf0ef;\n    --jl-on-danger: #ffffff;\n    --jl-info: #0c72b0;\n    --jl-info-soft: #e9f4fb;\n\n    /* Code: the accent for keywords, quiet colours from the same family for the rest. */\n    --jl-code-keyword: #0c72b0;\n    --jl-code-tag: #095a8b;\n    --jl-code-attribute: #5b48c8;\n    --jl-code-string: #17784a;\n    --jl-code-number: #9a5b00;\n    --jl-code-function: #3d5a80;\n    --jl-code-property: #127a72;\n    --jl-code-comment: #8a9099;\n\n    --jl-radius-xs: 6px;\n    --jl-radius-sm: 8px;\n    --jl-radius: 10px;\n    --jl-radius-lg: 12px;\n    --jl-radius-xl: 20px;\n    --jl-radius-pill: 999px;\n\n    /* Spacing: a 4px grid, for the layouts pages build around the components. */\n    --jl-space-1: 4px;\n    --jl-space-2: 8px;\n    --jl-space-3: 12px;\n    --jl-space-4: 16px;\n    --jl-space-5: 20px;\n    --jl-space-6: 24px;\n    --jl-space-8: 32px;\n    --jl-space-10: 40px;\n    --jl-space-12: 48px;\n    --jl-space-16: 64px;\n\n    --jl-control-sm: 30px;\n    --jl-control-md: 36px;\n    --jl-control-lg: 44px;\n    /* The text people type in fields. */\n    --jl-control-font: var(--jl-font-md);\n\n    /* The widest a page gets: a form, most pages, and the tables and grids that need the room. */\n    --jl-page-form: 720px;\n    --jl-page-standard: 1120px;\n    --jl-page-wide: 1400px;\n\n    /* Flat: lines separate; only what floats (menus, dialogs, toasts) casts a shadow. */\n    --jl-shadow-sm: 0 1px 2px rgb(11 11 12 / 0.05);\n    --jl-shadow: 0 6px 16px -6px rgb(11 11 12 / 0.12);\n    --jl-shadow-lg: 0 18px 44px -14px rgb(11 11 12 / 0.22);\n    --jl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jl-brand) 35%, transparent);\n    --jl-scrim: rgb(11 11 12 / 0.38);\n\n    --jl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);\n    --jl-fast: 120ms;\n    --jl-slow: 240ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme=\"light\"]) {\n      color-scheme: dark;\n      --jl-text: #eceef1;\n      --jl-text-2: #c3c8cf;\n      --jl-muted: #959ca6;\n      --jl-faint: #6b727c;\n      --jl-bg: #0f1113;\n      --jl-surface: #0f1113;\n      --jl-surface-2: #16191c;\n      --jl-surface-3: #1d2125;\n      --jl-code-bg: #1d2125;\n      --jl-line: #262a2f;\n      --jl-line-soft: #1f2327;\n      --jl-line-strong: #343a41;\n      --jl-brand: #1a9be0;\n      --jl-accent: #3ea6e8;\n      --jl-accent-strong: #6cc0f2;\n      --jl-accent-soft: #0f2a3b;\n      --jl-accent-line: #1e4a66;\n      --jl-on-accent: #04131c;\n      --jl-ok: #4cc38a;\n      --jl-ok-soft: #10261c;\n      --jl-warn: #e5a54b;\n      --jl-warn-soft: #2a2012;\n      --jl-danger: #f0786c;\n      --jl-danger-soft: #3a1a17;\n      --jl-on-danger: #1c0604;\n      --jl-info: #3ea6e8;\n      --jl-info-soft: #0f2a3b;\n      --jl-code-keyword: #3ea6e8;\n      --jl-code-tag: #6cc0f2;\n      --jl-code-attribute: #a99bf0;\n      --jl-code-string: #4cc38a;\n      --jl-code-number: #e5a54b;\n      --jl-code-function: #8fb0d6;\n      --jl-code-property: #4fc1b5;\n      --jl-code-comment: #6b727c;\n      --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n      --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n      --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n      --jl-scrim: rgb(0 0 0 / 0.55);\n    }\n  }\n\n  /* Dark: the same blue, lifted to read on a dark ground, with dark text on the buttons. */\n  [data-theme=\"dark\"] {\n    color-scheme: dark;\n    --jl-text: #eceef1;\n    --jl-text-2: #c3c8cf;\n    --jl-muted: #959ca6;\n    --jl-faint: #6b727c;\n    --jl-bg: #0f1113;\n    --jl-surface: #0f1113;\n    --jl-surface-2: #16191c;\n    --jl-surface-3: #1d2125;\n    --jl-code-bg: #1d2125;\n    --jl-line: #262a2f;\n    --jl-line-soft: #1f2327;\n    --jl-line-strong: #343a41;\n    --jl-brand: #1a9be0;\n    --jl-accent: #3ea6e8;\n    --jl-accent-strong: #6cc0f2;\n    --jl-accent-soft: #0f2a3b;\n    --jl-accent-line: #1e4a66;\n    --jl-on-accent: #04131c;\n    --jl-ok: #4cc38a;\n    --jl-ok-soft: #10261c;\n    --jl-warn: #e5a54b;\n    --jl-warn-soft: #2a2012;\n    --jl-danger: #f0786c;\n    --jl-danger-soft: #3a1a17;\n    --jl-on-danger: #1c0604;\n    --jl-info: #3ea6e8;\n    --jl-info-soft: #0f2a3b;\n    --jl-code-keyword: #3ea6e8;\n    --jl-code-tag: #6cc0f2;\n    --jl-code-attribute: #a99bf0;\n    --jl-code-string: #4cc38a;\n    --jl-code-number: #e5a54b;\n    --jl-code-function: #8fb0d6;\n    --jl-code-property: #4fc1b5;\n    --jl-code-comment: #6b727c;\n    --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n    --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n    --jl-scrim: rgb(0 0 0 / 0.55);\n  }\n\n  /*\n   * Touch screens: controls a finger can hit (44px for most), and field text phones do not zoom into when it takes\n   * the focus (16px). Themed parts of a page re-declare the sizes, so they take these too.\n   */\n  @media (pointer: coarse) {\n    :root,\n    [data-theme=\"light\"],\n    [data-theme=\"dark\"] {\n      --jl-control-sm: 36px;\n      --jl-control-md: 44px;\n      --jl-control-lg: 48px;\n      --jl-control-font: 16px;\n    }\n  }\n}\n";
 export { tokens_default as default };

package/dist/templates/jl-app-shell.d.ts

@@ -4,7 +4,9 @@ import { JlElement } from '../base/jl-element';
  * on its own, and an optional panel on the right (`aside`). Narrower than 960 pixels, the sidebar becomes a drawer
  * over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), the panel hides, and
  * a bar along the bottom shows (`tabs`, such as a `jl-tab-bar`, whose `more` opens the drawer).
- * It takes the height of its container: give that one a height (`100dvh` for a whole page).
+ * It takes the height of its container: give that one a height (`100dvh` for a whole page). A shell that fills the
+ * window writes the height of its tab bar, while it shows, as `--jl-shell-bottom` on the document: toasts keep
+ * above it, and a page's floating bars can (`bottom: calc(var(--jl-shell-bottom, 0px) + 16px)`).
  */
 export declare class JlAppShell extends JlElement {
     static readonly selector = "jl-app-shell";
@@ -25,6 +27,9 @@ export declare class JlAppShell extends JlElement {
     templateCss(): string;
     onConnect(): void;
     onDisconnect(): void;
+    /** Tells the page how much the tab bar covers at the bottom of the window, while it shows. */
+    private renderShellBottom;
+    private withdrawShellBottom;
     /** Whether the shell is narrow: the menu button shows only then. */
     private isNarrow;
     private onMenu;

package/dist/templates/jl-app-shell.js

@@ -10,6 +10,7 @@ import { jsx, jsxs } from "@jadis/core/jsx-runtime";
 registerIcons({ menu: Menu });
 var MENU_ICON_SIZE = 18;
 var HIDDEN = "none";
+var SHELL_BOTTOM = "--jl-shell-bottom";
 /** Whether a click inside the drawer followed a link: the page changes, so the drawer gets out of the way. */
 var followsLink = (event) => event.composedPath().some((node) => node instanceof HTMLAnchorElement && node.href !== "");
 /**
@@ -17,7 +18,9 @@ var followsLink = (event) => event.composedPath().some((node) => node instanceof
 * on its own, and an optional panel on the right (`aside`). Narrower than 960 pixels, the sidebar becomes a drawer
 * over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), the panel hides, and
 * a bar along the bottom shows (`tabs`, such as a `jl-tab-bar`, whose `more` opens the drawer).
-* It takes the height of its container: give that one a height (`100dvh` for a whole page).
+* It takes the height of its container: give that one a height (`100dvh` for a whole page). A shell that fills the
+* window writes the height of its tab bar, while it shows, as `--jl-shell-bottom` on the document: toasts keep
+* above it, and a page's floating bars can (`bottom: calc(var(--jl-shell-bottom, 0px) + 16px)`).
 */
 var JlAppShell = class extends JlElement {
 	static selector = "jl-app-shell";
@@ -26,9 +29,13 @@ var JlAppShell = class extends JlElement {
 	navOpen = this.useChange(false, (value) => this.renderNavOpen(value), { attribute: "nav-open" });
 	_state = {
 		navListeners: new AbortController(),
+		publishedBottom: false,
 		tabsListeners: new AbortController()
 	};
-	_resize = new ResizeObserver(() => this.renderInert());
+	_resize = new ResizeObserver(() => {
+		this.renderInert();
+		this.renderShellBottom();
+	});
 	_refs = this.useRefs((ref) => ({
 		aside: ref(".aside"),
 		asideSlot: ref("slot[name=\"aside\"]"),
@@ -96,6 +103,7 @@ var JlAppShell = class extends JlElement {
 	}
 	onConnect() {
 		this._resize.observe(this);
+		this._resize.observe(this._refs.tabs);
 		this.on(this._refs.menu, "click", () => this.onMenu());
 		this.on(this._refs.scrim, "click", () => this.setNavOpen(false));
 		this.on(this._refs.nav, "click", (event) => {
@@ -114,6 +122,23 @@ var JlAppShell = class extends JlElement {
 		this._resize.disconnect();
 		this._state.navListeners.abort();
 		this._state.tabsListeners.abort();
+		this.withdrawShellBottom();
+	}
+	/** Tells the page how much the tab bar covers at the bottom of the window, while it shows. */
+	renderShellBottom() {
+		const height = Math.round(this._refs.tabs.getBoundingClientRect().height);
+		const fillsWindow = this.getBoundingClientRect().bottom >= window.innerHeight - 1;
+		if (height === 0 || !fillsWindow) {
+			this.withdrawShellBottom();
+			return;
+		}
+		document.documentElement.style.setProperty(SHELL_BOTTOM, `${height}px`);
+		this._state.publishedBottom = true;
+	}
+	withdrawShellBottom() {
+		if (!this._state.publishedBottom) return;
+		document.documentElement.style.removeProperty(SHELL_BOTTOM);
+		this._state.publishedBottom = false;
 	}
 	/** Whether the shell is narrow: the menu button shows only then. */
 	isNarrow() {

package/dist/templates/jl-auth-layout.css_raw.js

@@ -0,0 +1,3 @@
+// src/templates/jl-auth-layout.css?raw
+var jl_auth_layout_default = ":host {\n  display: block;\n  min-height: var(--min-height, 100dvh);\n}\n\n.screen {\n  display: grid;\n  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);\n  min-height: var(--min-height, 100dvh);\n}\n\n/* The brand's dark panel: the dark tokens apply inside it (data-theme), whatever the page's theme. */\n.story {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 32px;\n  overflow: hidden;\n  padding: 40px 48px;\n  background: var(--jl-bg);\n  color: var(--jl-text);\n}\n\n.brand,\n.pitch,\n.points,\n.origin {\n  position: relative;\n  z-index: 1;\n}\n\n.pitch {\n  display: grid;\n  gap: 16px;\n  max-width: 520px;\n}\n\n.headline {\n  font-size: clamp(30px, 3.4vw, 46px);\n  font-weight: 800;\n  letter-spacing: -0.03em;\n  line-height: 1.08;\n  text-wrap: balance;\n}\n\n.accent {\n  color: var(--jl-brand);\n}\n\n.text {\n  color: var(--jl-muted);\n  font-size: 15.5px;\n  line-height: 1.6;\n}\n\n.points {\n  display: grid;\n  gap: 10px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--jl-font-md);\n}\n\n.points li {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.tick {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: var(--jl-brand);\n  color: var(--jl-on-brand);\n}\n\n.origin {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 650;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n/* The SyWare mark, large and faint, leaning out of the corner. */\n.backdrop {\n  position: absolute;\n  right: -90px;\n  bottom: -110px;\n  width: 420px;\n  height: 460px;\n  opacity: 0.07;\n  pointer-events: none;\n}\n\n.side {\n  display: grid;\n  place-items: center;\n  padding: 32px 24px;\n  background: var(--jl-bg);\n}\n\n/* A phone: the panel is a band with the brand, above the form. */\n@media (max-width: 860px) {\n  .screen {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n\n  .story {\n    padding: 18px 24px;\n  }\n\n  .pitch,\n  .points,\n  .origin,\n  .backdrop {\n    display: none;\n  }\n}\n";
+export { jl_auth_layout_default as default };