@syware/jlib 0.1.0 → 0.2.0

package/dist/lib/flow.js

@@ -0,0 +1,336 @@
+// src/lib/flow.ts
+/** A node's box: fixed, so that every anchor and edge is computed without measuring the page. */
+var FLOW_NODE = {
+	height: 64,
+	width: 240
+};
+var FLOW_ZOOM = {
+	max: 2,
+	min: .25,
+	step: 1.2
+};
+/** The exit of a node that names none. */
+var DEFAULT_PORT = { id: "out" };
+var PORT_DROP = 12;
+var GRID = 8;
+var STUB = 24;
+var CORNER_RADIUS = 12;
+var FIT_PADDING = 48;
+var REVEAL_MARGIN = 48;
+var ROW_GAP = 72;
+var COLUMN_GAP = 32;
+var portsOf = (node) => node.ports ?? [DEFAULT_PORT];
+/** The exit an edge leaves by: its own, or its node's first. */
+var portOfEdge = (node, edge) => edge.port ?? portsOf(node)[0]?.id ?? "";
+var nodeById = (graph, id) => graph.nodes.find((node) => node.id === id);
+var toGrid = (value) => Math.round(value / GRID) * GRID + 0;
+var snap = (point) => ({
+	x: toGrid(point.x),
+	y: toGrid(point.y)
+});
+/** Where a node's n-th exit sits along its bottom edge: the edge cut in equal parts, each exit in the middle of one. */
+var portX = (index, count) => FLOW_NODE.width * (index + .5) / count;
+function outputAnchor(node, portId) {
+	const ports = portsOf(node);
+	const index = ports.findIndex((port) => port.id === portId);
+	if (index < 0) return;
+	return {
+		x: node.position.x + portX(index, ports.length),
+		y: node.position.y + FLOW_NODE.height + PORT_DROP
+	};
+}
+var inputAnchor = (node) => ({
+	x: node.position.x + FLOW_NODE.width / 2,
+	y: node.position.y
+});
+var distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+/** The point `length` away from `from`, towards `to`. */
+function towards(from, to, length) {
+	const span = distance(from, to);
+	const ratio = span === 0 ? 0 : length / span;
+	return {
+		x: from.x + (to.x - from.x) * ratio,
+		y: from.y + (to.y - from.y) * ratio
+	};
+}
+/**
+* The corners an edge goes through, in straight runs: down from the exit, across halfway, down into the node. An
+* edge that goes back up turns around the side, clear of the nodes.
+*/
+function edgeRoute(from, to) {
+	const forward = to.y - from.y >= 48;
+	if (forward && to.x === from.x) return [from, to];
+	if (forward) {
+		const middle = (from.y + to.y) / 2;
+		return [
+			from,
+			{
+				x: from.x,
+				y: middle
+			},
+			{
+				x: to.x,
+				y: middle
+			},
+			to
+		];
+	}
+	const below = from.y + STUB;
+	const above = to.y - STUB;
+	const side = Math.abs(to.x - from.x) > FLOW_NODE.width ? (from.x + to.x) / 2 : Math.max(from.x, to.x) + FLOW_NODE.width;
+	return [
+		from,
+		{
+			x: from.x,
+			y: below
+		},
+		{
+			x: side,
+			y: below
+		},
+		{
+			x: side,
+			y: above
+		},
+		{
+			x: to.x,
+			y: above
+		},
+		to
+	];
+}
+/** An SVG path through the points, its corners rounded. */
+function roundedPath(points, radius = CORNER_RADIUS) {
+	const first = points[0];
+	const last = points.at(-1);
+	if (!first || !last) return "";
+	const corners = points.slice(1, -1).map((corner, index) => {
+		const before = points[index] ?? corner;
+		const after = points[index + 2] ?? corner;
+		const round = Math.min(radius, distance(before, corner) / 2, distance(corner, after) / 2);
+		const enter = towards(corner, before, round);
+		const leave = towards(corner, after, round);
+		return `L ${enter.x} ${enter.y} Q ${corner.x} ${corner.y} ${leave.x} ${leave.y}`;
+	});
+	return [
+		`M ${first.x} ${first.y}`,
+		...corners,
+		`L ${last.x} ${last.y}`
+	].join(" ");
+}
+/** The point halfway along a line through the points. */
+function halfway(points) {
+	const segments = points.slice(1).map((end, index) => ({
+		end,
+		start: points[index] ?? end
+	}));
+	const walk = { left: segments.reduce((sum, { end, start }) => sum + distance(start, end), 0) / 2 };
+	for (const { end, start } of segments) {
+		const length = distance(start, end);
+		if (walk.left <= length) return towards(start, end, walk.left);
+		walk.left -= length;
+	}
+	return points.at(-1) ?? {
+		x: 0,
+		y: 0
+	};
+}
+var edgePath = (from, to) => roundedPath(edgeRoute(from, to));
+/** The point halfway along `edgePath(from, to)`. */
+var edgeMidpoint = (from, to) => halfway(edgeRoute(from, to));
+/** Where an edge starts and ends, or nothing when one of its ends is gone. */
+function edgeEnds(graph, edge) {
+	const source = nodeById(graph, edge.from);
+	const target = nodeById(graph, edge.to);
+	const portId = source ? portOfEdge(source, edge) : "";
+	const from = source ? outputAnchor(source, portId) : void 0;
+	if (!source || !target || !from) return;
+	const tone = portsOf(source).find((port) => port.id === portId)?.tone ?? "neutral";
+	return {
+		from,
+		to: inputAnchor(target),
+		tone
+	};
+}
+var isInside = (point, node) => point.x >= node.position.x && point.x <= node.position.x + FLOW_NODE.width && point.y >= node.position.y && point.y <= node.position.y + FLOW_NODE.height;
+/** The node under a point, other than `except`. */
+var nodeAt = (graph, point, except = "") => graph.nodes.find((node) => node.id !== except && isInside(point, node));
+var isPortFree = (graph, node, portId) => !graph.edges.some((edge) => edge.from === node.id && portOfEdge(node, edge) === portId);
+/**
+* The graph with one more edge, or nothing when the edge cannot be: a node does not connect to itself, a start takes
+* no incoming edge, and an exit joins a node once.
+*/
+function connect(graph, edge) {
+	const source = nodeById(graph, edge.from);
+	const target = nodeById(graph, edge.to);
+	if (!source || !target || source.id === target.id || target.start === true) return;
+	const port = portOfEdge(source, edge);
+	const known = portsOf(source).some((candidate) => candidate.id === port);
+	const exists = graph.edges.some((candidate) => candidate.from === source.id && candidate.to === target.id && portOfEdge(source, candidate) === port);
+	return known && !exists ? {
+		...graph,
+		edges: [...graph.edges, edge]
+	} : void 0;
+}
+var moveNode = (graph, id, position) => ({
+	...graph,
+	nodes: graph.nodes.map((node) => node.id === id ? {
+		...node,
+		position
+	} : node)
+});
+/** The graph without the node, and without its edges. */
+var removeNode = (graph, id) => ({
+	edges: graph.edges.filter((edge) => edge.from !== id && edge.to !== id),
+	nodes: graph.nodes.filter((node) => node.id !== id)
+});
+var removeEdge = (graph, id) => ({
+	...graph,
+	edges: graph.edges.filter((edge) => edge.id !== id)
+});
+var ROW = FLOW_NODE.height + ROW_GAP;
+var COLUMN = FLOW_NODE.width + COLUMN_GAP;
+/** How far across a node hangs from its parent's exit: the exits share the row out, side by side, around it. */
+function portShift(node, portId) {
+	const ports = portsOf(node);
+	return (Math.max(0, ports.findIndex((port) => port.id === portId)) - (ports.length - 1) / 2) * COLUMN;
+}
+/** Where a node added after an exit goes: a row below, under its exit, clear of the nodes after the other exits. */
+function positionAfter(graph, from, portId) {
+	const source = nodeById(graph, from);
+	if (!source) return {
+		x: 0,
+		y: 0
+	};
+	return snap({
+		x: source.position.x + portShift(source, portId),
+		y: source.position.y + ROW
+	});
+}
+/** The edges that close a loop, found walking from the starts: the layout leaves them out, or a loop has no top. */
+function loopEdges(graph) {
+	const loops = /* @__PURE__ */ new Set();
+	const done = /* @__PURE__ */ new Set();
+	const path = /* @__PURE__ */ new Set();
+	const visit = (id) => {
+		if (done.has(id)) return;
+		path.add(id);
+		for (const edge of graph.edges.filter((candidate) => candidate.from === id)) {
+			if (path.has(edge.to)) {
+				loops.add(edge.id);
+				continue;
+			}
+			visit(edge.to);
+		}
+		path.delete(id);
+		done.add(id);
+	};
+	const starts = graph.nodes.filter((node) => node.start === true);
+	for (const node of [...starts, ...graph.nodes]) visit(node.id);
+	return loops;
+}
+/** Each node's row: one below the lowest node leading to it, so the flow reads from top to bottom. */
+function rowsOf(graph, edges) {
+	const rows = new Map(graph.nodes.map((node) => [node.id, 0]));
+	const rowOf = (id) => rows.get(id) ?? 0;
+	for (const _round of graph.nodes) {
+		const deeper = edges.filter((edge) => rowOf(edge.to) <= rowOf(edge.from));
+		if (deeper.length === 0) break;
+		for (const edge of deeper) rows.set(edge.to, Math.max(rowOf(edge.to), rowOf(edge.from) + 1));
+	}
+	return rows;
+}
+/** Where a node wants to be across: under its parents, each by the exit it hangs from. */
+function wantedX(graph, edges, id, placed) {
+	const parents = edges.flatMap((edge) => {
+		const source = nodeById(graph, edge.from);
+		const x = placed.get(edge.from);
+		return edge.to === id && source && x !== void 0 ? [x + portShift(source, portOfEdge(source, edge))] : [];
+	});
+	return parents.length === 0 ? 0 : parents.reduce((sum, x) => sum + x, 0) / parents.length;
+}
+/** A row's nodes where they want to be, pushed apart where they would overlap, the row kept centred on them. */
+function placeRow(wanted, placed) {
+	const sorted = [...wanted].sort((a, b) => a.x - b.x);
+	const pushed = [];
+	for (const item of sorted) pushed.push(Math.max(item.x, (pushed.at(-1) ?? Number.NEGATIVE_INFINITY) + COLUMN));
+	const drift = pushed.reduce((sum, x, index) => sum + x - (sorted[index]?.x ?? x), 0) / Math.max(1, pushed.length);
+	for (const [index, item] of sorted.entries()) placed.set(item.id, (pushed[index] ?? item.x) - drift);
+}
+/**
+* The nodes laid out again, top to bottom in the order they run: the starts and the nodes nothing leads to on the
+* first row, each other node a row below the lowest node leading to it, under the exits it hangs from. Edges that
+* loop back up do not count. Only the positions change.
+*/
+function layoutFlow(graph) {
+	const ids = new Set(graph.nodes.map((node) => node.id));
+	const loops = loopEdges(graph);
+	const edges = graph.edges.filter((edge) => !loops.has(edge.id) && ids.has(edge.from) && ids.has(edge.to));
+	const rows = rowsOf(graph, edges);
+	const placed = /* @__PURE__ */ new Map();
+	for (const row of [...new Set(rows.values())].sort((a, b) => a - b)) placeRow(graph.nodes.filter((node) => rows.get(node.id) === row).map((node) => ({
+		id: node.id,
+		x: wantedX(graph, edges, node.id, placed)
+	})), placed);
+	return {
+		...graph,
+		nodes: graph.nodes.map((node) => ({
+			...node,
+			position: snap({
+				x: placed.get(node.id) ?? 0,
+				y: (rows.get(node.id) ?? 0) * ROW
+			})
+		}))
+	};
+}
+var clampZoom = (zoom) => Math.min(FLOW_ZOOM.max, Math.max(FLOW_ZOOM.min, zoom));
+/** Where a point of the canvas (relative to its top left corner) is in the flow's own pixels. */
+var toWorld = (viewport, screen) => ({
+	x: (screen.x - viewport.x) / viewport.zoom,
+	y: (screen.y - viewport.y) / viewport.zoom
+});
+/** Zooms by `factor`, keeping the point under `screen` where it is: zooming follows the pointer. */
+function zoomAt(viewport, screen, factor) {
+	const zoom = clampZoom(viewport.zoom * factor);
+	const world = toWorld(viewport, screen);
+	return {
+		x: screen.x - world.x * zoom,
+		y: screen.y - world.y * zoom,
+		zoom
+	};
+}
+/** The view that shows every node, centred in a canvas of this size, never larger than life. */
+function fitView(nodes, width, height) {
+	if (nodes.length === 0) return {
+		x: FIT_PADDING,
+		y: FIT_PADDING,
+		zoom: 1
+	};
+	const left = Math.min(...nodes.map((node) => node.position.x));
+	const top = Math.min(...nodes.map((node) => node.position.y));
+	const right = Math.max(...nodes.map((node) => node.position.x + FLOW_NODE.width));
+	const bottom = Math.max(...nodes.map((node) => node.position.y + FLOW_NODE.height + PORT_DROP));
+	const zoom = clampZoom(Math.min(1, (width - 96) / (right - left), (height - 96) / (bottom - top)));
+	return {
+		x: width / 2 - (left + right) / 2 * zoom,
+		y: height / 2 - (top + bottom) / 2 * zoom,
+		zoom
+	};
+}
+/** How far to move a span so that it fits between the margins of `size`: nothing when it already does. */
+function shiftInto(start, end, size) {
+	if (start < REVEAL_MARGIN) return REVEAL_MARGIN - start;
+	return end > size - REVEAL_MARGIN ? size - REVEAL_MARGIN - end : 0;
+}
+/** The view moved just enough for a node to be seen whole, its exits included; unchanged when it already is. */
+function revealIn(viewport, node, width, height) {
+	const { zoom } = viewport;
+	const left = viewport.x + node.position.x * zoom;
+	const top = viewport.y + node.position.y * zoom;
+	return {
+		x: viewport.x + shiftInto(left, left + FLOW_NODE.width * zoom, width),
+		y: viewport.y + shiftInto(top, top + (FLOW_NODE.height + PORT_DROP) * zoom, height),
+		zoom
+	};
+}
+export { DEFAULT_PORT, FLOW_NODE, FLOW_ZOOM, connect, edgeEnds, edgeMidpoint, edgePath, edgeRoute, fitView, inputAnchor, isPortFree, layoutFlow, moveNode, nodeAt, outputAnchor, portOfEdge, portX, portsOf, positionAfter, removeEdge, removeNode, revealIn, roundedPath, snap, toWorld, zoomAt };

package/dist/lib/options.d.ts

@@ -3,3 +3,8 @@ export declare const TONES: readonly Tone[];
 export declare const CONTROL_SIZES: readonly ControlSize[];
 /** The icon that says each tone at a glance: alerts, toasts and callouts use it. */
 export declare const TONE_ICONS: Record<Tone, string>;
+/**
+ * Whether a tone's icon reads well filled (`jl-icon filled`): a sign in a circle or a triangle does, the accent's
+ * sparkles do not.
+ */
+export declare const TONE_ICON_FILLED: Record<Tone, boolean>;

package/dist/lib/options.js

@@ -21,4 +21,16 @@ var TONE_ICONS = {
 	ok: "circle-check",
 	warn: "triangle-alert"
 };
-export { CONTROL_SIZES, TONES, TONE_ICONS };
+/**
+* Whether a tone's icon reads well filled (`jl-icon filled`): a sign in a circle or a triangle does, the accent's
+* sparkles do not.
+*/
+var TONE_ICON_FILLED = {
+	accent: false,
+	danger: true,
+	info: true,
+	neutral: true,
+	ok: true,
+	warn: true
+};
+export { CONTROL_SIZES, TONES, TONE_ICONS, TONE_ICON_FILLED };

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

@@ -34,5 +34,6 @@ export declare class JlAlert extends JlElement {
     templateCss(): string;
     onConnect(): void;
     private renderActions;
+    /** The tone's own icon is filled, as a toast's is; an icon of the page's stays as it is drawn. */
     private renderIcon;
 }

package/dist/molecules/jl-alert.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 { TONES, TONE_ICONS } from "../lib/options.js";
+import { TONES, TONE_ICONS, TONE_ICON_FILLED } from "../lib/options.js";
 import { hasSlotted } from "../lib/slots.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import { JlButton } from "../atoms/jl-button.js";
@@ -119,10 +119,12 @@ var JlAlert = class extends JlElement {
 	renderActions() {
 		this._refs.actions.hidden = !hasSlotted(this._refs.actionsSlot);
 	}
+	/** The tone's own icon is filled, as a toast's is; an icon of the page's stays as it is drawn. */
 	renderIcon() {
 		const own = this.icon.get();
 		const name = own === "" ? TONE_ICONS[this.tone.get()] : own;
 		this._refs.icon.name.set(name === NO_ICON ? "" : name);
+		this._refs.icon.filled.set(own === "" && TONE_ICON_FILLED[this.tone.get()]);
 		this._refs.icon.hidden = name === NO_ICON;
 		this.reflect("has-icon", name !== NO_ICON);
 	}

package/dist/molecules/jl-date-picker.d.ts

@@ -2,9 +2,10 @@ import { JlFormControl } from '../base/jl-form-control';
 import type { Weekday } from '../types/calendar.types';
 import type { ControlSize } from '../types/options.types';
 /**
- * A field for a date: it shows the date written for people (in the `locale`) and opens a calendar from its
- * button, Alt + Down or Down. People may also type the date as ISO (`2026-10-25`). `value` and the form hold the
- * ISO date.
+ * A field for a date: it shows the date in digits, in the `locale`'s order (`25.10.2026`, `10/25/2026`), and opens a
+ * calendar from its button, Alt + Down or Down. People may also type the date: as it shows, with any separators or
+ * none (`25102026`), or year first. Phones show their number keys; letters are refused. `value` and the form hold
+ * the ISO date.
  */
 export declare class JlDatePicker extends JlFormControl {
     static readonly selector = "jl-date-picker";
@@ -16,6 +17,7 @@ export declare class JlDatePicker extends JlFormControl {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** Without one, the field shows how a date is typed in its locale: `dd.mm.yyyy`. */
     readonly placeholder: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
@@ -91,7 +93,10 @@ export declare class JlDatePicker extends JlFormControl {
     private onPick;
     private openPopup;
     private closePopup;
-    /** The typed text: an ISO date sets the value, an empty field clears it, anything else goes back to the date. */
+    /**
+     * The typed text: a date in the locale's order (any separators, or none) or year first sets the value, an empty
+     * field clears it, anything else goes back to the date there was.
+     */
     private commitText;
     /** Sets the value as people chose it, and says so when it changed. */
     private commit;
@@ -99,6 +104,7 @@ export declare class JlDatePicker extends JlFormControl {
     /** The value when it is a real ISO date, otherwise nothing. */
     private validIso;
     private display;
+    private renderPlaceholder;
     private renderValue;
     private renderBound;
     /** Required, and within min and max, as a native date field checks it. */

package/dist/molecules/jl-date-picker.js

@@ -6,7 +6,7 @@ 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 { compareDates, formatDate, parseIsoDate, toIsoDate } from "../lib/calendar.js";
+import { NUMERIC_DATE, compareDates, dateOrder, datePattern, formatDate, isDateText, parseIsoDate, parseTypedDate, toIsoDate } from "../lib/calendar.js";
 import { pageLocale } from "../lib/locale.js";
 import { JlCalendar } from "./jl-calendar.js";
 import jl_date_picker_default from "./jl-date-picker.css_raw.js";
@@ -28,16 +28,18 @@ var VALUE_MISSING = "Choose a date.";
 var DIALOG_LABEL = "Choose a date";
 var parseWeekday = (value) => Math.round(clampedNumber(MONDAY, SUNDAY, SATURDAY)(value));
 /**
-* A field for a date: it shows the date written for people (in the `locale`) and opens a calendar from its
-* button, Alt + Down or Down. People may also type the date as ISO (`2026-10-25`). `value` and the form hold the
-* ISO date.
+* A field for a date: it shows the date in digits, in the `locale`'s order (`25.10.2026`, `10/25/2026`), and opens a
+* calendar from its button, Alt + Down or Down. People may also type the date: as it shows, with any separators or
+* none (`25102026`), or year first. Phones show their number keys; letters are refused. `value` and the form hold
+* the ISO date.
 */
 var JlDatePicker = class extends JlFormControl {
 	static selector = "jl-date-picker";
 	events = this.useEvents();
 	/** The date, as ISO (`2026-10-25`); empty for none. */
 	value = this.useChange("", () => this.renderValue(), { attribute: "value" });
-	placeholder = this.useChange("", (value) => setOrRemove(this._refs.native, "placeholder", value), { attribute: "placeholder" });
+	/** Without one, the field shows how a date is typed in its locale: `dd.mm.yyyy`. */
+	placeholder = this.useChange("", () => this.renderPlaceholder(), { attribute: "placeholder" });
 	/** The field's name for screen readers, when no visible label names it. */
 	label = this.useChange("", (value) => setOrRemove(this._refs.native, "aria-label", value), { attribute: "label" });
 	/** The first day that can be chosen, as ISO. */
@@ -47,6 +49,7 @@ var JlDatePicker = class extends JlFormControl {
 	/** The language the date and the calendar are written in: `fr-CH`. The page's by default. */
 	locale = this.useChange("", (value) => {
 		this._refs.calendar.locale.set(value);
+		this.renderPlaceholder();
 		this.renderValue();
 	}, { attribute: "locale" });
 	/** The day the calendar's weeks start on: 0 for Sunday, 1 for Monday. */
@@ -106,6 +109,7 @@ var JlDatePicker = class extends JlFormControl {
 					role: "combobox",
 					autocomplete: "off",
 					spellcheck: false,
+					inputMode: "decimal",
 					"aria-haspopup": "dialog",
 					"aria-expanded": "false",
 					"aria-controls": this._popupId
@@ -154,6 +158,9 @@ var JlDatePicker = class extends JlFormControl {
 			event.stopPropagation();
 			this.renderClear();
 		});
+		this.on(native, "beforeinput", (event) => {
+			if (event.data !== null && !isDateText(event.data)) event.preventDefault();
+		});
 		this.on(native, "change", () => this.commitText());
 		this.on(native, "keydown", (event) => this.onKey(event));
 		this.on(open, "pointerdown", () => {
@@ -232,7 +239,10 @@ var JlDatePicker = class extends JlFormControl {
 	closePopup() {
 		if (this.isOpen()) this._refs.popup.hidePopover();
 	}
-	/** The typed text: an ISO date sets the value, an empty field clears it, anything else goes back to the date. */
+	/**
+	* The typed text: a date in the locale's order (any separators, or none) or year first sets the value, an empty
+	* field clears it, anything else goes back to the date there was.
+	*/
 	commitText() {
 		const text = this._refs.native.value.trim();
 		if (text === this.display(this.value.get())) return;
@@ -240,7 +250,7 @@ var JlDatePicker = class extends JlFormControl {
 			this.commit("");
 			return;
 		}
-		const date = parseIsoDate(text);
+		const date = parseTypedDate(text, dateOrder(pageLocale(this.locale.get())));
 		if (date === null) {
 			this.renderValue();
 			return;
@@ -264,7 +274,10 @@ var JlDatePicker = class extends JlFormControl {
 	}
 	display(value) {
 		const date = parseIsoDate(value);
-		return date === null ? "" : formatDate(date, pageLocale(this.locale.get()));
+		return date === null ? "" : formatDate(date, pageLocale(this.locale.get()), NUMERIC_DATE);
+	}
+	renderPlaceholder() {
+		this._refs.native.placeholder = this.placeholder.get() || datePattern(pageLocale(this.locale.get()));
 	}
 	renderValue() {
 		const value = this.validIso();

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;