@syware/jlib 0.1.3 → 0.3.0

package/dist/molecules/jl-search.js

@@ -77,6 +77,13 @@ var JlSearch = class extends JlFormControl {
 	select() {
 		this._refs.native.select();
 	}
+	/** Empties the field, as its clear button does: `input` and `search` fire with `''`, and it takes the focus. */
+	clear() {
+		this.value.set("");
+		this.events.emit("input", "");
+		this.search("");
+		this.focus();
+	}
 	templateHtml() {
 		return /* @__PURE__ */ jsxs("div", {
 			class: "control",
@@ -151,6 +158,7 @@ var JlSearch = class extends JlFormControl {
 		if (event.key === "Enter") {
 			event.preventDefault();
 			this.search(this.value.get());
+			this.events.emit("enter", this.value.get());
 			return;
 		}
 		if (event.key === "Escape" && this.value.get() !== "") {
@@ -178,12 +186,6 @@ var JlSearch = class extends JlFormControl {
 		this._state.lastSearch = query;
 		this.events.emit("search", query);
 	}
-	clear() {
-		this.value.set("");
-		this.events.emit("input", "");
-		this.search("");
-		this.focus();
-	}
 	renderValue(value) {
 		const native = this._refs.native;
 		if (native.value !== value) native.value = value;

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

@@ -1,3 +1,3 @@
 // src/molecules/jl-segmented.css?raw
-var jl_segmented_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  /* Its own width, even as a grid or flex item that would stretch it: block asks for the whole width. */\n  justify-self: start;\n  max-width: 100%;\n  --height: var(--jl-control-md);\n  --pad: 12px;\n  --font-size: var(--jl-font-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --pad: 10px;\n  --font-size: var(--jl-font-xs);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --pad: 16px;\n  --font-size: var(--jl-font-md);\n}\n\n:host([block]) {\n  display: flex;\n  justify-self: stretch;\n}\n\n.group {\n  position: relative;\n  display: flex;\n  flex: 1;\n  overflow-x: auto;\n  scrollbar-width: none;\n  min-width: 0;\n  height: var(--height);\n  padding: 2px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface-2);\n}\n\n.segment {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-width: calc(var(--height) - 6px);\n  padding: 0 var(--pad);\n  border: none;\n  border-radius: calc(var(--jl-radius-sm) - 3px);\n  background: none;\n  color: var(--jl-muted);\n  font-size: var(--font-size);\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: color var(--jl-fast) var(--jl-ease);\n}\n\n.segment:hover:not(:disabled) {\n  color: var(--jl-text);\n}\n\n.segment[aria-checked=\"true\"] {\n  color: var(--jl-text);\n}\n\n.segment:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n:host([block]) .segment {\n  flex: 1 1 0;\n}\n\n/* The chosen option's raised surface, slid under it. */\n.thumb {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--w);\n  height: var(--h);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: calc(var(--jl-radius-sm) - 3px);\n  /* Raised over the track: white on light grey, a lighter grey on a dark ground. */\n  background: light-dark(var(--jl-surface), var(--jl-surface-3));\n  box-shadow: var(--jl-shadow-sm);\n  transform: translate(var(--x), var(--y));\n  pointer-events: none;\n}\n\n.thumb[data-placed] {\n  transition:\n    transform var(--jl-slow) var(--jl-ease),\n    width var(--jl-slow) var(--jl-ease);\n}\n\n.group[aria-disabled] {\n  opacity: 0.55;\n}\n\n.group[aria-disabled] .segment {\n  opacity: 1;\n}\n\n/* The track scrolls when the options do not fit: a ring drawn outside the segment would be cut. */\n.segment:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n";
+var jl_segmented_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  /* Its own width, even as a grid or flex item that would stretch it: block asks for the whole width. */\n  justify-self: start;\n  max-width: 100%;\n  --height: var(--jl-control-md);\n  --pad: 12px;\n  --font-size: var(--jl-font-sm);\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --pad: 10px;\n  --font-size: var(--jl-font-xs);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --pad: 16px;\n  --font-size: var(--jl-font-md);\n}\n\n:host([block]) {\n  display: flex;\n  justify-self: stretch;\n}\n\n.group {\n  position: relative;\n  display: flex;\n  flex: 1;\n  overflow-x: auto;\n  scrollbar-width: none;\n  min-width: 0;\n  height: var(--height);\n  padding: 2px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface-2);\n}\n\n.segment {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-width: calc(var(--height) - 6px);\n  padding: 0 var(--pad);\n  border: none;\n  border-radius: calc(var(--jl-radius-sm) - 3px);\n  background: none;\n  color: var(--jl-muted);\n  font-size: var(--font-size);\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: color var(--jl-fast) var(--jl-ease);\n}\n\n.segment:hover:not(:disabled) {\n  color: var(--jl-text);\n}\n\n.segment[aria-checked=\"true\"] {\n  color: var(--jl-text);\n}\n\n.badge {\n  min-width: 18px;\n  padding: 0 6px;\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface-3);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 650;\n  line-height: 18px;\n  text-align: center;\n}\n\n.segment[aria-checked=\"true\"] .badge {\n  background: var(--jl-accent-soft);\n  color: var(--jl-accent);\n}\n\n.segment:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n:host([block]) .segment {\n  flex: 1 1 0;\n}\n\n/* The chosen option's raised surface, slid under it. */\n.thumb {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--w);\n  height: var(--h);\n  border: 1px solid var(--jl-line-strong);\n  border-radius: calc(var(--jl-radius-sm) - 3px);\n  /* Raised over the track: white on light grey, a lighter grey on a dark ground. */\n  background: light-dark(var(--jl-surface), var(--jl-surface-3));\n  box-shadow: var(--jl-shadow-sm);\n  transform: translate(var(--x), var(--y));\n  pointer-events: none;\n}\n\n.thumb[data-placed] {\n  transition:\n    transform var(--jl-slow) var(--jl-ease),\n    width var(--jl-slow) var(--jl-ease);\n}\n\n.group[aria-disabled] {\n  opacity: 0.55;\n}\n\n.group[aria-disabled] .segment {\n  opacity: 1;\n}\n\n/* The track scrolls when the options do not fit: a ring drawn outside the segment would be cut. */\n.segment:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n";
 export { jl_segmented_default as default };

package/dist/molecules/jl-segmented.js

@@ -126,13 +126,20 @@ var JlSegmented = class extends JlFormControl {
 			class: "segment",
 			"data-value": option.value,
 			"data-disabled": option.disabled === true ? "" : void 0,
-			children: [option.icon === void 0 ? "" : /* @__PURE__ */ jsx(JlIcon, {
-				name: option.icon,
-				size: iconSize
-			}), label === "" ? "" : /* @__PURE__ */ jsx("span", {
-				class: "label",
-				children: label
-			})]
+			children: [
+				option.icon === void 0 ? "" : /* @__PURE__ */ jsx(JlIcon, {
+					name: option.icon,
+					size: iconSize
+				}),
+				label === "" ? "" : /* @__PURE__ */ jsx("span", {
+					class: "label",
+					children: label
+				}),
+				option.badge === void 0 ? "" : /* @__PURE__ */ jsx("span", {
+					class: "badge",
+					children: String(option.badge)
+				})
+			]
 		});
 	}
 	/** The chosen option's index: the one `value` names, or else the first that can be chosen. */

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

@@ -1,3 +1,3 @@
 // src/molecules/jl-stat.css?raw
-var jl_stat_default = ":host {\n  display: block;\n  --mood: var(--jl-muted);\n}\n\n:host([mood=\"good\"]) {\n  --mood: var(--jl-ok);\n}\n\n:host([mood=\"bad\"]) {\n  --mood: var(--jl-danger);\n}\n\n.stat {\n  display: grid;\n  gap: 4px;\n  min-width: 0;\n}\n\n.top {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n.icon {\n  color: var(--jl-faint);\n}\n\n.figure {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n}\n\n.value {\n  color: var(--jl-text);\n  font-size: var(--jl-font-2xl);\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n}\n\n.delta {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--mood);\n  font-size: var(--jl-font-sm);\n  font-variant-numeric: tabular-nums;\n  font-weight: 650;\n  white-space: nowrap;\n}\n\n.caption {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  line-height: 1.4;\n}\n\n.spark {\n  height: 36px;\n  margin-top: 8px;\n}\n\n.spark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n.line {\n  fill: none;\n  stroke: var(--jl-accent);\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke-width: 2;\n  vector-effect: non-scaling-stroke;\n}\n\n.area {\n  fill: color-mix(in srgb, var(--jl-accent) 10%, transparent);\n  stroke: none;\n}\n";
+var jl_stat_default = ":host {\n  display: block;\n  --mood: var(--jl-muted);\n}\n\n:host([mood=\"good\"]) {\n  --mood: var(--jl-ok);\n}\n\n:host([mood=\"bad\"]) {\n  --mood: var(--jl-danger);\n}\n\n.stat {\n  display: grid;\n  gap: 4px;\n  min-width: 0;\n}\n\n.top {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n.icon {\n  color: var(--jl-faint);\n}\n\n:host([tone=\"accent\"]) .icon {\n  color: var(--jl-accent);\n}\n\n:host([tone=\"ok\"]) .icon {\n  color: var(--jl-ok);\n}\n\n:host([tone=\"warn\"]) .icon {\n  color: var(--jl-warn);\n}\n\n:host([tone=\"danger\"]) .icon {\n  color: var(--jl-danger);\n}\n\n:host([tone=\"info\"]) .icon {\n  color: var(--jl-info);\n}\n\n.figure {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n}\n\n.value {\n  color: var(--jl-text);\n  font-size: var(--jl-font-2xl);\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n}\n\n.delta {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--mood);\n  font-size: var(--jl-font-sm);\n  font-variant-numeric: tabular-nums;\n  font-weight: 650;\n  white-space: nowrap;\n}\n\n.caption {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  line-height: 1.4;\n}\n\n.spark {\n  height: 36px;\n  margin-top: 8px;\n}\n\n.spark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n.line {\n  fill: none;\n  stroke: var(--jl-accent);\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke-width: 2;\n  vector-effect: non-scaling-stroke;\n}\n\n.area {\n  fill: color-mix(in srgb, var(--jl-accent) 10%, transparent);\n  stroke: none;\n}\n";
 export { jl_stat_default as default };

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

@@ -1,5 +1,6 @@
 import { JlElement } from '../base/jl-element';
 import type { StatTrend } from '../types/jl-stat.types';
+import type { Tone } from '../types/options.types';
 export declare const STAT_TRENDS: readonly StatTrend[];
 /**
  * A key figure: what it measures, its value, how it moved (`delta`, coloured by its trend) and an optional
@@ -36,6 +37,11 @@ export declare class JlStat extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** The colour of the icon: neutral (quiet) by default, or what the figure is about (`ok`, `info`…). */
+    readonly tone: Readonly<Readonly<{
+        get(): Tone;
+        set(setter: ((prevState: Tone) => Tone) | Tone): void;
+    }>>;
     /** A note under the figure: "vs. last month". */
     readonly caption: Readonly<Readonly<{
         get(): string;

package/dist/molecules/jl-stat.js

@@ -2,6 +2,7 @@ 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 { TONES } from "../lib/options.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { areaAttribute, pointsAttribute, sparklinePoints } from "../lib/sparkline.js";
 import { trendOfDelta } from "../lib/trend.js";
@@ -71,6 +72,11 @@ var JlStat = class extends JlElement {
 		this._refs.icon.name.set(value);
 		this._refs.icon.hidden = value === "";
 	}, { attribute: "icon" });
+	/** The colour of the icon: neutral (quiet) by default, or what the figure is about (`ok`, `info`…). */
+	tone = this.useChange("neutral", (value) => this.reflect("tone", value), {
+		attribute: "tone",
+		parse: oneOf(TONES, "neutral")
+	});
 	/** A note under the figure: "vs. last month". */
 	caption = this.useChange("", (value) => {
 		this._refs.caption.textContent = value;

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

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

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

@@ -1,3 +1,3 @@
 // src/molecules/jl-timeline.css?raw
-var jl_timeline_default = ":host {\n  display: block;\n  --marker: 22px;\n  --gap: 20px;\n  --title-size: var(--jl-font-md);\n}\n\n:host([compact]) {\n  --marker: 18px;\n  --gap: 12px;\n  --title-size: var(--jl-font-sm);\n}\n\n.timeline {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.event {\n  position: relative;\n  display: grid;\n  grid-template-columns: var(--marker) minmax(0, 1fr);\n  gap: 12px;\n  padding-bottom: var(--gap);\n  --tone: var(--jl-muted);\n  --soft: var(--jl-surface-3);\n}\n\n.event:last-child {\n  padding-bottom: 0;\n}\n\n.event[data-tone=\"accent\"] {\n  --tone: var(--jl-accent);\n  --soft: var(--jl-accent-soft);\n}\n\n.event[data-tone=\"ok\"] {\n  --tone: var(--jl-ok);\n  --soft: var(--jl-ok-soft);\n}\n\n.event[data-tone=\"warn\"] {\n  --tone: var(--jl-warn);\n  --soft: var(--jl-warn-soft);\n}\n\n.event[data-tone=\"danger\"] {\n  --tone: var(--jl-danger);\n  --soft: var(--jl-danger-soft);\n}\n\n.event[data-tone=\"info\"] {\n  --tone: var(--jl-info);\n  --soft: var(--jl-info-soft);\n}\n\n/* The line runs from this marker's centre to the next one's, behind the markers. */\n.event:not(:last-child)::before {\n  position: absolute;\n  top: 10px;\n  bottom: -10px;\n  left: calc(var(--marker) / 2 - 0.5px);\n  width: 1px;\n  background: var(--jl-line-strong);\n  content: \"\";\n}\n\n.rail {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n}\n\n.marker {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n}\n\n.dot {\n  width: 10px;\n  height: 10px;\n  background: var(--tone);\n  box-shadow: 0 0 0 3px var(--jl-surface);\n}\n\n:host([compact]) .dot {\n  width: 8px;\n  height: 8px;\n}\n\n.circle {\n  width: var(--marker);\n  height: var(--marker);\n  border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--soft));\n  background: var(--soft);\n  color: var(--tone);\n  box-shadow: 0 0 0 3px var(--jl-surface);\n}\n\n.content {\n  display: grid;\n  gap: 2px;\n}\n\n.line {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 2px 12px;\n}\n\n.title {\n  color: var(--jl-text);\n  font-size: var(--title-size);\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.time {\n  flex: none;\n  margin-left: auto;\n  color: var(--jl-muted);\n  font-family: var(--jl-font-mono);\n  font-size: var(--jl-font-xs);\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 1.5;\n}\n\n:host([compact]) .description {\n  font-size: var(--jl-font-xs);\n}\n";
+var jl_timeline_default = ":host {\n  display: block;\n  --marker: 22px;\n  --gap: 20px;\n  --title-size: var(--jl-font-md);\n}\n\n:host([compact]) {\n  --marker: 18px;\n  --gap: 12px;\n  --title-size: var(--jl-font-sm);\n}\n\n.timeline {\n  /* The markers (and the room after them), the times and the texts in three columns shared by every event: the times\n     line up beside their markers, each next to its title, however wide the timeline. Without any time, the middle\n     column takes no room. */\n  display: grid;\n  grid-template-columns: calc(var(--marker) + 12px) auto minmax(0, 1fr);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.event {\n  position: relative;\n  display: grid;\n  grid-column: 1 / -1;\n  /* Browsers without subgrid keep the columns per event. */\n  grid-template-columns: calc(var(--marker) + 12px) auto minmax(0, 1fr);\n  padding-bottom: var(--gap);\n  --tone: var(--jl-muted);\n  --soft: var(--jl-surface-3);\n}\n\n@supports (grid-template-columns: subgrid) {\n  .event {\n    grid-template-columns: subgrid;\n  }\n}\n\n.event:last-child {\n  padding-bottom: 0;\n}\n\n.event[data-tone=\"accent\"] {\n  --tone: var(--jl-accent);\n  --soft: var(--jl-accent-soft);\n}\n\n.event[data-tone=\"ok\"] {\n  --tone: var(--jl-ok);\n  --soft: var(--jl-ok-soft);\n}\n\n.event[data-tone=\"warn\"] {\n  --tone: var(--jl-warn);\n  --soft: var(--jl-warn-soft);\n}\n\n.event[data-tone=\"danger\"] {\n  --tone: var(--jl-danger);\n  --soft: var(--jl-danger-soft);\n}\n\n.event[data-tone=\"info\"] {\n  --tone: var(--jl-info);\n  --soft: var(--jl-info-soft);\n}\n\n/* The line runs from this marker's centre to the next one's, behind the markers. */\n.event:not(:last-child)::before {\n  position: absolute;\n  top: 10px;\n  bottom: -10px;\n  left: calc(var(--marker) / 2 - 0.5px);\n  width: 1px;\n  background: var(--jl-line-strong);\n  content: \"\";\n}\n\n.rail {\n  position: relative;\n  grid-column: 1;\n  width: var(--marker);\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n}\n\n.marker {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n}\n\n.dot {\n  width: 10px;\n  height: 10px;\n  background: var(--tone);\n  box-shadow: 0 0 0 3px var(--jl-surface);\n}\n\n:host([compact]) .dot {\n  width: 8px;\n  height: 8px;\n}\n\n.circle {\n  width: var(--marker);\n  height: var(--marker);\n  border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--soft));\n  background: var(--soft);\n  color: var(--tone);\n  box-shadow: 0 0 0 3px var(--jl-surface);\n}\n\n.content {\n  display: grid;\n  grid-column: 3;\n  gap: 2px;\n}\n\n.title {\n  color: var(--jl-text);\n  font-size: var(--title-size);\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.time {\n  grid-column: 2;\n  padding-right: 12px;\n  color: var(--jl-muted);\n  font-family: var(--jl-font-mono);\n  font-size: var(--jl-font-xs);\n  /* On the title's line. */\n  line-height: 20px;\n  white-space: nowrap;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 1.5;\n}\n\n:host([compact]) .description {\n  font-size: var(--jl-font-xs);\n}\n";
 export { jl_timeline_default as default };

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

@@ -2,7 +2,8 @@ import { JlElement } from '../base/jl-element';
 import type { TimelineItem } from '../types/jl-timeline.types';
 /**
  * What happened, in order, along a vertical line: each event a dot (or an icon in a circle) in its tone's colour,
- * a title, an optional description, and its time on the right. `compact` tightens it for side panels.
+ * its time beside the marker (the times in one column), a title and an optional description. `compact` tightens it
+ * for side panels.
  */
 export declare class JlTimeline extends JlElement {
     static readonly selector = "jl-timeline";

package/dist/molecules/jl-timeline.js

@@ -11,7 +11,8 @@ var ICON_SIZE = 14;
 var COMPACT_ICON_SIZE = 12;
 /**
 * What happened, in order, along a vertical line: each event a dot (or an icon in a circle) in its tone's colour,
-* a title, an optional description, and its time on the right. `compact` tightens it for side panels.
+* its time beside the marker (the times in one column), a title and an optional description. `compact` tightens it
+* for side panels.
 */
 var JlTimeline = class extends JlElement {
 	static selector = "jl-timeline";
@@ -55,25 +56,26 @@ var JlTimeline = class extends JlElement {
 		return /* @__PURE__ */ jsxs("li", {
 			class: "event",
 			"data-tone": item.tone ?? "neutral",
-			children: [/* @__PURE__ */ jsx("span", {
-				class: "rail",
-				children: marker
-			}), /* @__PURE__ */ jsxs("div", {
-				class: "content",
-				children: [/* @__PURE__ */ jsxs("div", {
-					class: "line",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					class: "rail",
+					children: marker
+				}),
+				item.time === void 0 ? null : /* @__PURE__ */ jsx("time", {
+					class: "time",
+					children: item.time
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "content",
 					children: [/* @__PURE__ */ jsx("p", {
 						class: "title",
 						children: item.title
-					}), item.time === void 0 ? null : /* @__PURE__ */ jsx("time", {
-						class: "time",
-						children: item.time
+					}), item.description === void 0 ? null : /* @__PURE__ */ jsx("p", {
+						class: "description",
+						children: item.description
 					})]
-				}), item.description === void 0 ? null : /* @__PURE__ */ jsx("p", {
-					class: "description",
-					children: item.description
-				})]
-			})]
+				})
+			]
 		});
 	}
 };

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

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

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

@@ -69,6 +69,7 @@ export declare class JlToast extends JlElement {
     private hold;
     /** Whether the focus, moving to `next`, stays in the toast (its buttons, or what the page slotted in it). */
     private holdsFocus;
+    /** The tone's own icon is filled, so its colour shows at a glance; an icon of the page's stays as it is drawn. */
     private renderIcon;
     /** Inside a toaster, its live region announces the toast; alone, the toast is its own. */
     private renderRole;

package/dist/molecules/jl-toast.js

@@ -2,7 +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 { TONE_ICONS } from "../lib/options.js";
+import { TONE_ICONS, TONE_ICON_FILLED } from "../lib/options.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { JlButton } from "../atoms/jl-button.js";
 import jl_toast_default from "./jl-toast.css_raw.js";
@@ -257,9 +257,11 @@ var JlToast = class extends JlElement {
 	holdsFocus(next) {
 		return next instanceof Node && (next === this || this.contains(next) || this._refs.toast.contains(next));
 	}
+	/** The tone's own icon is filled, so its colour shows at a glance; an icon of the page's stays as it is drawn. */
 	renderIcon() {
 		const icon = this.icon.get();
 		this._refs.icon.name.set(icon === "" ? TONE_ICONS[this.tone.get()] : icon);
+		this._refs.icon.filled.set(icon === "" && TONE_ICON_FILLED[this.tone.get()]);
 	}
 	/** Inside a toaster, its live region announces the toast; alone, the toast is its own. */
 	renderRole() {

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

@@ -0,0 +1,3 @@
+// src/organisms/jl-flow.css?raw
+var jl_flow_default = ":host {\n  display: block;\n  height: 420px;\n  min-height: 0;\n}\n\n.viewport {\n  position: relative;\n  height: 100%;\n  overflow: clip;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n  background-color: var(--jl-surface-2);\n  background-image: radial-gradient(circle, var(--jl-line-strong) 1px, transparent 1.2px);\n  outline: none;\n  touch-action: none;\n  user-select: none;\n}\n\n.viewport:focus-visible {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.world,\n.nodes,\n.edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.world {\n  transform-origin: 0 0;\n}\n\n.edges {\n  overflow: visible;\n  pointer-events: none;\n}\n\n.edge {\n  fill: none;\n  stroke: color-mix(in srgb, var(--tone, var(--jl-muted)) 60%, var(--jl-line-strong));\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n\n.edge[data-tone=\"danger\"] {\n  stroke-dasharray: 6 5;\n}\n\n.edge-hit {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 14;\n  pointer-events: stroke;\n  cursor: pointer;\n}\n\n.edge-group:hover .edge {\n  stroke: var(--tone, var(--jl-muted));\n}\n\n.edge-group.taken .edge {\n  stroke: var(--tone, var(--jl-muted));\n  stroke-width: 3;\n}\n\n.edge-group.selected .edge {\n  stroke: var(--jl-accent);\n  stroke-width: 3;\n}\n\n.draft {\n  stroke: var(--jl-accent);\n  stroke-dasharray: 5 5;\n}\n\n/* The box's size is the one lib/flow.ts computes the edges with: 240 wide, and the height the script sets (64, or 96\n   with a detail line). */\n.node {\n  --tone: var(--jl-accent);\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 240px;\n  height: 64px;\n  padding: 0 var(--jl-space-3) var(--jl-space-1);\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n  background: var(--jl-surface);\n  box-shadow: var(--jl-shadow-sm);\n  cursor: grab;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.node:hover {\n  border-color: var(--jl-line-strong);\n}\n\n.node:focus-visible {\n  outline: none;\n  box-shadow: var(--jl-focus-ring);\n}\n\n/* How a node did in a run: a ring while it works or waits for someone, a border once it is done or failed. */\n.node[data-status=\"running\"] {\n  --state: var(--jl-info);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-info) 30%, transparent);\n}\n\n.node[data-status=\"done\"] {\n  --state: var(--jl-ok);\n  border-color: color-mix(in srgb, var(--jl-ok) 55%, var(--jl-line));\n}\n\n.node[data-status=\"waiting\"] {\n  --state: var(--jl-brand);\n  border-color: var(--jl-brand);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-brand) 30%, transparent);\n}\n\n.node[data-status=\"failed\"] {\n  --state: var(--jl-danger);\n  border-color: var(--jl-danger);\n}\n\n.node.selected {\n  border-color: var(--jl-accent);\n  box-shadow: 0 0 0 3px var(--jl-accent-soft);\n}\n\n.head {\n  display: flex;\n  align-items: center;\n  gap: var(--jl-space-3);\n  min-width: 0;\n}\n\n/* With a detail line, the head sits at the top and the detail under it, clear of the exits below. */\n.node:has(.detail) {\n  justify-content: flex-start;\n  padding-top: 10px;\n}\n\n.detail {\n  overflow: hidden;\n  margin-top: 6px;\n  padding-top: 5px;\n  line-height: 16px;\n  border-top: 1px dashed var(--jl-line);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.problem {\n  display: inline-flex;\n  flex: none;\n  color: var(--jl-danger);\n}\n\n.status {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--state);\n  color: var(--jl-on-accent);\n}\n\n.node[data-status=\"running\"] .status jl-icon {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    rotate: 360deg;\n  }\n}\n\n.input {\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  width: 10px;\n  height: 10px;\n  border: 2px solid var(--jl-surface);\n  border-radius: 50%;\n  background: var(--jl-line-strong);\n  transform: translateX(-50%);\n}\n\n.icon {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: var(--jl-radius);\n  background: color-mix(in srgb, var(--tone) 14%, var(--jl-surface));\n  color: var(--tone);\n}\n\n.text {\n  display: grid;\n  flex: 1;\n  min-width: 0;\n}\n\n.label,\n.description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label {\n  color: var(--jl-text);\n  font-size: var(--jl-font-sm);\n  font-weight: 600;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n.ports {\n  position: absolute;\n  right: 0;\n  bottom: -11px;\n  left: 0;\n  height: 22px;\n}\n\n.port {\n  --tone: var(--jl-muted);\n  position: absolute;\n  top: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--jl-space-1);\n  height: 22px;\n  padding: 0 7px;\n  border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--jl-line));\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-surface);\n  color: color-mix(in srgb, var(--tone) 80%, var(--jl-text));\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n  white-space: nowrap;\n  transform: translateX(-50%);\n  cursor: crosshair;\n}\n\n.port:has(.add) {\n  padding-right: 3px;\n}\n\n/* The exit a run left by. */\n.port[data-taken] {\n  border-color: var(--tone);\n  background: color-mix(in srgb, var(--tone) 14%, var(--jl-surface));\n}\n\n.dot {\n  flex: none;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tone);\n}\n\n.port-label {\n  overflow: hidden;\n  min-width: 0;\n  text-overflow: ellipsis;\n}\n\n.add,\n.remove-edge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n.add {\n  width: 16px;\n  height: 16px;\n  border: none;\n  background: color-mix(in srgb, var(--tone) 16%, var(--jl-surface));\n  color: var(--tone);\n}\n\n.add:hover {\n  background: var(--tone);\n  color: var(--jl-surface);\n}\n\n.remove-edge {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 24px;\n  height: 24px;\n  border: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n  color: var(--jl-danger);\n}\n\n.remove-edge:hover {\n  border-color: var(--jl-danger);\n  background: var(--jl-danger);\n  color: var(--jl-on-danger);\n}\n\n.empty {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  padding: var(--jl-space-6);\n  color: var(--jl-muted);\n  text-align: center;\n  pointer-events: none;\n}\n\n.empty[hidden] {\n  display: none;\n}\n\n.empty ::slotted(*) {\n  pointer-events: auto;\n}\n\n.controls {\n  position: absolute;\n  bottom: var(--jl-space-3);\n  left: var(--jl-space-3);\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 2px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface);\n}\n\n/* The zoom buttons: small and quiet, as ghost buttons. */\n.control {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--jl-control-sm);\n  height: var(--jl-control-sm);\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: transparent;\n  color: var(--jl-accent);\n  cursor: pointer;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n.control:hover {\n  background: var(--jl-accent-soft);\n}\n\n.zoom-label {\n  min-width: 40px;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n}\n\n/* The tones of icons, exits and edges: after .node and .port, whose default tones they replace. */\n[data-tone=\"neutral\"] {\n  --tone: var(--jl-muted);\n}\n\n[data-tone=\"accent\"] {\n  --tone: var(--jl-accent);\n}\n\n[data-tone=\"ok\"] {\n  --tone: var(--jl-ok);\n}\n\n[data-tone=\"warn\"] {\n  --tone: var(--jl-warn);\n}\n\n[data-tone=\"danger\"] {\n  --tone: var(--jl-danger);\n}\n\n[data-tone=\"info\"] {\n  --tone: var(--jl-info);\n}\n\n/* View only: nodes are pressed to be selected, not dragged, and their exits do not connect. */\n:host([readonly]) .node,\n:host([readonly]) .port {\n  cursor: pointer;\n}\n\n/* View only: the layout stays as it was given. */\n:host([readonly]) .tidy {\n  display: none;\n}\n";
+export { jl_flow_default as default };

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

@@ -0,0 +1,109 @@
+import { JlElement } from '../base/jl-element';
+import type { FlowAddRequest, FlowDropRequest, FlowGraph, FlowPoint } from '../types/jl-flow.types';
+/**
+ * A flow of nodes joined by edges, to edit: people move the nodes, draw an edge from a node's exit to another node,
+ * press + on a free exit to ask for the next node, and move and zoom the view. Every edit goes out as a new graph
+ * (`change`); the page adds nodes itself, when `add` or `drop` asks. Nodes can show how a run went (`status`,
+ * `taken`) and what to fix (`problem`).
+ */
+export declare class JlFlow extends JlElement {
+    static readonly selector = "jl-flow";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: FlowGraph;
+        select: string;
+        add: FlowAddRequest;
+        drop: FlowDropRequest;
+    }>>;
+    readonly graph: Readonly<Readonly<{
+        get(): FlowGraph;
+        set(setter: FlowGraph | ((prevState: FlowGraph) => FlowGraph)): void;
+    }>>;
+    /** The id of the selected node; the view moves to show it. */
+    readonly selected: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** View only: nodes can be selected, not moved, joined or removed. */
+    readonly readonly: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /**
+     * The drag-and-drop type the canvas takes (`application/x-step`): something dragged in carrying it asks for a node
+     * where it is dropped, with `drop`.
+     */
+    readonly dropType: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The canvas's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _state;
+    private readonly _nodes;
+    private readonly _svg;
+    private readonly _refs;
+    /** Moves and zooms the view to show every node, never larger than life. */
+    fit(): void;
+    /** Moves the view, when needed, so that a node is in sight: one just added, or moved with the keys. */
+    reveal(id: string): void;
+    /** Where a node added after an exit goes, as + puts it: a row below, under that exit. */
+    positionAfter(from: string, port: string): FlowPoint;
+    /** Where a node added without a place goes: in the middle of the view (its top left corner). */
+    centerPosition(): FlowPoint;
+    /** Lays the nodes out again, in rows from the starts down (`change` gives the new positions), and shows them all. */
+    layout(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private show;
+    /** An edit: drawn, kept, and sent to the page. */
+    private commit;
+    private select;
+    private selectEdge;
+    private removeSelection;
+    private nodeOf;
+    private pointerDown;
+    private gestureFor;
+    private pointerMove;
+    private drag;
+    private drawDraft;
+    private pointerUp;
+    /** An edge dropped on a node joins it; dropped on empty space, it asks for a node there. */
+    private connectAt;
+    private pressAdd;
+    /** Whether a drag carries what the canvas takes: then it may be dropped here. */
+    private carriesDrop;
+    private dragOver;
+    private dropOn;
+    private key;
+    /** The arrows move the selected node; with Shift, further. */
+    private nudge;
+    /** Two fingers or the wheel move the view; with Ctrl or ⌘ (a pinch on a trackpad), they zoom. */
+    private wheel;
+    private zoomBy;
+    private setViewport;
+    private applyViewport;
+    private screenPoint;
+    private worldPoint;
+    private render;
+    /** The nodes' elements stay from one drawing to the next: the focused one keeps the focus. */
+    private renderNodes;
+    private createNode;
+    private drawNode;
+    /** A colour of the page's own for the icon wins over the tone's. */
+    private paintIcon;
+    private portElement;
+    private place;
+    private renderSelection;
+    private renderEdges;
+    /**
+     * An edge, with a wide invisible twin that catches the pointer: a thin line is still easy to press. One a run took
+     * stands out.
+     */
+    private edgeGroup;
+    /** The button that removes the selected edge, in its middle. */
+    private renderEdgeTool;
+}