@syware/jlib 0.1.3 → 0.3.0

package/dist/lib/flow.js

@@ -0,0 +1,353 @@
+// src/lib/flow.ts
+/**
+* A node's box: fixed, so that every anchor and edge is computed without measuring the page. A node with a detail
+* line is taller.
+*/
+var FLOW_NODE = {
+	height: 64,
+	heightWithDetail: 96,
+	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];
+var nodeHeight = (node) => node.detail ? FLOW_NODE.heightWithDetail : FLOW_NODE.height;
+/** 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 + nodeHeight(node) + 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 + nodeHeight(node);
+/** A run went this way: its node left by the edge's exit, and the node it leads to ran too. */
+function isEdgeTaken(graph, edge) {
+	const source = nodeById(graph, edge.from);
+	const target = nodeById(graph, edge.to);
+	return source?.taken !== void 0 && source.taken === portOfEdge(source, edge) && target?.status !== void 0;
+}
+/** The position of a node centred on a point: where something dropped there lands. */
+var centeredAt = (point) => snap({
+	x: point.x - FLOW_NODE.width / 2,
+	y: point.y - FLOW_NODE.height / 2
+});
+/** 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 COLUMN = FLOW_NODE.width + COLUMN_GAP;
+var rowOfFlow = (graph) => Math.max(FLOW_NODE.height, ...graph.nodes.map(nodeHeight)) + ROW_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 + nodeHeight(source) + ROW_GAP
+	});
+}
+/** 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 row = rowOfFlow(graph);
+	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 + nodeHeight(node) + 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 + (nodeHeight(node) + PORT_DROP) * zoom, height),
+		zoom
+	};
+}
+export { DEFAULT_PORT, FLOW_NODE, FLOW_ZOOM, centeredAt, connect, edgeEnds, edgeMidpoint, edgePath, edgeRoute, fitView, inputAnchor, isEdgeTaken, isPortFree, layoutFlow, moveNode, nodeAt, nodeHeight, 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-accordion-item.css_raw.js

@@ -1,3 +1,3 @@
 // src/molecules/jl-accordion-item.css?raw
-var jl_accordion_item_default = ":host {\n  display: block;\n  border-bottom: 1px solid var(--jl-line);\n  /* Lets the content's height animate from 0 to auto. */\n  interpolate-size: allow-keywords;\n  --pad-x: 0px;\n}\n\nsummary {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 48px;\n  padding: 12px var(--pad-x);\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 1.4;\n  list-style: none;\n  cursor: pointer;\n  user-select: none;\n}\n\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n.heading {\n  flex: 1;\n  min-width: 0;\n}\n\n.icon {\n  color: var(--jl-muted);\n}\n\n.chevron {\n  color: var(--jl-faint);\n  transition: rotate var(--jl-slow) var(--jl-ease);\n}\n\nsummary:hover .chevron {\n  color: var(--jl-text);\n}\n\ndetails[open] .chevron {\n  rotate: 180deg;\n}\n\nsummary:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n\n/*\n * The content box is a pseudo-element BASE_STYLES' \"* { box-sizing: inherit }\" does not reach: without this, what\n * it holds (and the slotted fields, which inherit through it) would fall back to content-box.\n */\ndetails::details-content {\n  box-sizing: inherit;\n  block-size: 0;\n  overflow: clip;\n  transition:\n    block-size var(--jl-slow) var(--jl-ease),\n    content-visibility var(--jl-slow) allow-discrete;\n}\n\ndetails[open]::details-content {\n  block-size: auto;\n}\n\n.content {\n  padding: 0 var(--pad-x) 16px;\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n  line-height: 1.6;\n}\n\n:host([disabled]) summary {\n  color: var(--jl-faint);\n  cursor: not-allowed;\n}\n\n:host([disabled]) summary:hover .chevron {\n  color: var(--jl-faint);\n}\n";
+var jl_accordion_item_default = ":host {\n  display: block;\n  border-bottom: 1px solid var(--jl-line);\n  /* Lets the content's height animate from 0 to auto. */\n  interpolate-size: allow-keywords;\n  --pad-x: 0px;\n}\n\nsummary {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 48px;\n  padding: 12px var(--pad-x);\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 1.4;\n  list-style: none;\n  cursor: pointer;\n  user-select: none;\n}\n\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n.titles {\n  display: grid;\n  flex: 1;\n  min-width: 0;\n}\n\n.description {\n  overflow: hidden;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  font-weight: 400;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.icon {\n  color: var(--jl-muted);\n}\n\n.chevron {\n  color: var(--jl-faint);\n  transition: rotate var(--jl-slow) var(--jl-ease);\n}\n\nsummary:hover .chevron {\n  color: var(--jl-text);\n}\n\ndetails[open] .chevron {\n  rotate: 180deg;\n}\n\nsummary:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n\n/*\n * The content box is a pseudo-element BASE_STYLES' \"* { box-sizing: inherit }\" does not reach: without this, what\n * it holds (and the slotted fields, which inherit through it) would fall back to content-box.\n */\ndetails::details-content {\n  box-sizing: inherit;\n  block-size: 0;\n  overflow: clip;\n  transition:\n    block-size var(--jl-slow) var(--jl-ease),\n    content-visibility var(--jl-slow) allow-discrete;\n}\n\ndetails[open]::details-content {\n  block-size: auto;\n}\n\n.content {\n  padding: 0 var(--pad-x) 16px;\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n  line-height: 1.6;\n}\n\n:host([disabled]) summary {\n  color: var(--jl-faint);\n  cursor: not-allowed;\n}\n\n:host([disabled]) summary:hover .chevron {\n  color: var(--jl-faint);\n}\n";
 export { jl_accordion_item_default as default };

package/dist/molecules/jl-accordion-item.d.ts

@@ -12,11 +12,16 @@ export declare class JlAccordionItem extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** A quieter line under the heading, shown open or closed: what the section holds ("3 fields", "2 pages"). */
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     readonly open: Readonly<Readonly<{
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
-    /** An icon before the heading. */
+    /** An icon before the heading; the `icon` slot takes a richer one instead. */
     readonly icon: Readonly<Readonly<{
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;

package/dist/molecules/jl-accordion-item.js

@@ -19,8 +19,13 @@ var JlAccordionItem = class extends JlElement {
 	heading = this.useChange("", (value) => {
 		this._refs.heading.textContent = value;
 	}, { attribute: "heading" });
+	/** A quieter line under the heading, shown open or closed: what the section holds ("3 fields", "2 pages"). */
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+	}, { attribute: "description" });
 	open = this.useChange(false, (value) => this.renderOpen(value), { attribute: "open" });
-	/** An icon before the heading. */
+	/** An icon before the heading; the `icon` slot takes a richer one instead. */
 	icon = this.useChange("", (name) => {
 		this._refs.icon.name.set(name);
 		this._refs.icon.hidden = name === "";
@@ -32,6 +37,7 @@ var JlAccordionItem = class extends JlElement {
 		this._refs.summary.tabIndex = value ? -1 : 0;
 	}, { attribute: "disabled" });
 	_refs = this.useRefs((ref) => ({
+		description: ref(".description"),
 		details: ref("details"),
 		heading: ref(".heading"),
 		icon: ref(".icon"),
@@ -41,12 +47,21 @@ var JlAccordionItem = class extends JlElement {
 		return /* @__PURE__ */ jsxs("details", {
 			attrs: { part: "base" },
 			children: [/* @__PURE__ */ jsxs("summary", { children: [
-				/* @__PURE__ */ jsx(JlIcon, {
-					class: "icon",
-					size: ICON_SIZE,
-					hidden: true
+				/* @__PURE__ */ jsx("slot", {
+					name: "icon",
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						class: "icon",
+						size: ICON_SIZE,
+						hidden: true
+					})
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					class: "titles",
+					children: [/* @__PURE__ */ jsx("span", { class: "heading" }), /* @__PURE__ */ jsx("span", {
+						class: "description",
+						hidden: true
+					})]
 				}),
-				/* @__PURE__ */ jsx("span", { class: "heading" }),
 				/* @__PURE__ */ jsx(JlIcon, {
 					class: "chevron",
 					name: "chevron-down",

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-search.d.ts

@@ -9,6 +9,7 @@ export declare class JlSearch extends JlFormControl {
     readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
         input: string;
         search: string;
+        enter: string;
     }>>;
     readonly value: Readonly<Readonly<{
         get(): string;
@@ -52,6 +53,8 @@ export declare class JlSearch extends JlFormControl {
     focus(options?: FocusOptions): void;
     /** Selects the whole text, ready to be replaced. */
     select(): void;
+    /** Empties the field, as its clear button does: `input` and `search` fire with `''`, and it takes the focus. */
+    clear(): void;
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;
@@ -64,7 +67,6 @@ export declare class JlSearch extends JlFormControl {
     private onPageKey;
     private scheduleSearch;
     private search;
-    private clear;
     private renderValue;
     private renderActions;
     private renderShortcut;