@syware/jlib 0.0.0-stage → 0.1.3

package/dist/molecules/jl-segmented.js

@@ -0,0 +1,187 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { jsonOf, oneOf } from "../lib/attributes.js";
+import { CONTROL_SIZES } from "../lib/options.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { firstIndex, lastIndex, stepIndex } from "../lib/roving.js";
+import { moveIndicator } from "../lib/indicator.js";
+import jl_segmented_default from "./jl-segmented.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-segmented.tsx
+var ICON_SIZES = {
+	lg: 18,
+	md: 16,
+	sm: 14
+};
+var KEY_MOVES = /* @__PURE__ */ new Map([
+	["ArrowDown", (enabled, from) => stepIndex(enabled, from, 1)],
+	["ArrowLeft", (enabled, from) => stepIndex(enabled, from, -1)],
+	["ArrowRight", (enabled, from) => stepIndex(enabled, from, 1)],
+	["ArrowUp", (enabled, from) => stepIndex(enabled, from, -1)],
+	["End", lastIndex],
+	["Home", firstIndex]
+]);
+/**
+* A row of a few exclusive choices with a thumb that slides to the chosen one: a view switch, a period, a
+* density. It takes part in forms like a radio group; `change` fires with the value people pick.
+*/
+var JlSegmented = class extends JlFormControl {
+	static selector = "jl-segmented";
+	events = this.useEvents();
+	options = this.useChange([], () => this.renderOptions(), {
+		attribute: "options",
+		parse: jsonOf([])
+	});
+	/** The chosen option's value; the first option that can be chosen when it names none. */
+	value = this.useChange("", () => this.renderValue(), { attribute: "value" });
+	size = this.useChange("md", (value) => {
+		this.reflect("size", value);
+		this.renderOptions();
+	}, {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	/** Takes the whole width, the options sharing it. */
+	block = this.useChange(false, (value) => {
+		this.reflect("block", value);
+		this.placeThumb();
+	}, { attribute: "block" });
+	disabled = this.useChange(false, (value) => {
+		this.reflect("disabled", value);
+		this.renderDisabled();
+	}, { attribute: "disabled" });
+	/** The group's name for screen readers, when no visible label names it. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.group, "aria-label", value), { attribute: "label" });
+	_state = { disabledByForm: false };
+	_resize = new ResizeObserver(() => this.placeThumb());
+	_refs = this.useRefs((ref) => ({
+		group: ref(".group"),
+		thumb: ref(".thumb")
+	}));
+	focus(options) {
+		this.selectedSegment()?.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsx("div", {
+			class: "group",
+			role: "radiogroup",
+			attrs: { part: "base" },
+			children: /* @__PURE__ */ jsx("span", {
+				class: "thumb",
+				"aria-hidden": "true",
+				hidden: true
+			})
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_segmented_default}`;
+	}
+	onConnect() {
+		this._resize.observe(this._refs.group);
+		this.on(this._refs.group, "click", (event) => {
+			const segment = event.target.closest(".segment");
+			if (segment !== null) this.choose(this.segments().indexOf(segment), false);
+		});
+		this.on(this._refs.group, "keydown", (event) => this.onKeydown(event));
+	}
+	onDisconnect() {
+		this._resize.disconnect();
+	}
+	resetValue() {
+		this.value.set(this.getAttribute("value") ?? "");
+	}
+	/** The browser calls it for a disabled fieldset and for the element's own `disabled`, even before it renders. */
+	setDisabledByForm(disabled) {
+		this._state.disabledByForm = disabled;
+		this.whenRendered(() => this.renderDisabled());
+	}
+	segments() {
+		return [...this._refs.group.querySelectorAll(".segment")];
+	}
+	selectedSegment() {
+		return this.segments().find((segment) => segment.getAttribute("aria-checked") === "true") ?? null;
+	}
+	isDisabled() {
+		return this.disabled.get() || this._state.disabledByForm;
+	}
+	renderOptions() {
+		const iconSize = ICON_SIZES[this.size.get()];
+		const segments = this.options.get().map((option) => this.segment(option, iconSize));
+		this._refs.group.replaceChildren(this._refs.thumb, ...segments);
+		this.renderValue();
+		this.renderDisabled();
+	}
+	/** A segment; with only an icon, its value names it. */
+	segment(option, iconSize) {
+		const label = option.label ?? "";
+		const name = label === "" ? option.value : void 0;
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": "false",
+			"aria-label": name,
+			title: name,
+			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
+			})]
+		});
+	}
+	/** The chosen option's index: the one `value` names, or else the first that can be chosen. */
+	selectedIndex() {
+		const options = this.options.get();
+		const named = options.findIndex((option) => option.value === this.value.get() && option.disabled !== true);
+		return named === -1 ? options.findIndex((option) => option.disabled !== true) : named;
+	}
+	renderValue() {
+		const option = this.options.get()[this.selectedIndex()];
+		if (option !== void 0 && option.value !== this.value.get()) {
+			this.value.set(option.value);
+			return;
+		}
+		const value = option?.value ?? "";
+		this.segments().forEach((segment) => {
+			const checked = segment.dataset.value === value;
+			segment.setAttribute("aria-checked", String(checked));
+			segment.tabIndex = checked ? 0 : -1;
+		});
+		this.internals.setFormValue(value);
+		this.placeThumb();
+	}
+	renderDisabled() {
+		const disabled = this.isDisabled();
+		this._refs.group.toggleAttribute("aria-disabled", disabled);
+		for (const segment of this.segments()) segment.disabled = disabled || segment.hasAttribute("data-disabled");
+	}
+	placeThumb() {
+		moveIndicator(this._refs.thumb, this.selectedSegment());
+	}
+	onKeydown(event) {
+		const move = KEY_MOVES.get(event.key);
+		const segments = this.segments();
+		const from = segments.indexOf(event.target);
+		if (move === void 0 || from === -1) return;
+		event.preventDefault();
+		this.choose(move(segments.map((segment) => !segment.disabled), from), true);
+	}
+	/** Chooses an option people picked, and says so. */
+	choose(index, focus) {
+		const option = this.options.get()[index];
+		const segment = this.segments()[index];
+		if (option === void 0 || segment === void 0 || segment.disabled) return;
+		if (focus) segment.focus();
+		if (option.value === this.value.get()) return;
+		this.value.set(option.value);
+		this.events.emit("change", option.value);
+	}
+};
+JlSegmented.register();
+export { JlSegmented };

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

@@ -0,0 +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";
+export { jl_stat_default as default };

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

@@ -0,0 +1,55 @@
+import { JlElement } from '../base/jl-element';
+import type { StatTrend } from '../types/jl-stat.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
+ * sparkline of its recent `points`. Put it in a card for a tile; several make a dashboard's row.
+ */
+export declare class JlStat extends JlElement {
+    static readonly selector = "jl-stat";
+    /** What the figure measures: "Revenue", "Active users". */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The figure, as people read it: "$48,210", "1,204", "98.2%". */
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** How it changed: "+12.5%", "-3". Its sign gives the trend when `trend` is not set. */
+    readonly delta: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Which way it went; read from the delta's sign when absent. */
+    readonly trend: Readonly<Readonly<{
+        get(): "" | StatTrend;
+        set(setter: "" | ((prevState: "" | StatTrend) => "" | StatTrend) | StatTrend): void;
+    }>>;
+    /** For figures where down is good (costs, errors, load time): down is green, up is red. */
+    readonly invert: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** A note under the figure: "vs. last month". */
+    readonly caption: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Recent values, oldest first, drawn as a sparkline: `[4, 6, 5, 9, 12]`. */
+    readonly points: Readonly<Readonly<{
+        get(): number[];
+        set(setter: number[] | ((prevState: number[]) => number[])): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    private effectiveTrend;
+    private renderDelta;
+    private renderSparkline;
+}

package/dist/molecules/jl-stat.js

@@ -0,0 +1,169 @@
+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 { JlIcon } from "../atoms/jl-icon.js";
+import { areaAttribute, pointsAttribute, sparklinePoints } from "../lib/sparkline.js";
+import { trendOfDelta } from "../lib/trend.js";
+import jl_stat_default from "./jl-stat.css_raw.js";
+import { css } from "@jadis/core";
+import { Minus, TrendingDown, TrendingUp } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-stat.tsx
+registerIcons({
+	minus: Minus,
+	"trending-down": TrendingDown,
+	"trending-up": TrendingUp
+});
+var STAT_TRENDS = [
+	"up",
+	"down",
+	"flat"
+];
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SPARK_BOX = {
+	height: 32,
+	inset: 2,
+	width: 100
+};
+var ICON_SIZE = 16;
+var TREND_ICON_SIZE = 14;
+var TREND_ICONS = {
+	down: "trending-down",
+	flat: "minus",
+	up: "trending-up"
+};
+var TREND_MOODS = {
+	down: "bad",
+	flat: "neutral",
+	up: "good"
+};
+var INVERTED_MOODS = {
+	down: "good",
+	flat: "neutral",
+	up: "bad"
+};
+var isNumberList = (value) => Array.isArray(value) && value.every((item) => typeof item === "number");
+/**
+* A key figure: what it measures, its value, how it moved (`delta`, coloured by its trend) and an optional
+* sparkline of its recent `points`. Put it in a card for a tile; several make a dashboard's row.
+*/
+var JlStat = class extends JlElement {
+	static selector = "jl-stat";
+	/** What the figure measures: "Revenue", "Active users". */
+	label = this.useChange("", (value) => {
+		this._refs.label.textContent = value;
+	}, { attribute: "label" });
+	/** The figure, as people read it: "$48,210", "1,204", "98.2%". */
+	value = this.useChange("", (value) => {
+		this._refs.value.textContent = value;
+	}, { attribute: "value" });
+	/** How it changed: "+12.5%", "-3". Its sign gives the trend when `trend` is not set. */
+	delta = this.useChange("", () => this.renderDelta(), { attribute: "delta" });
+	/** Which way it went; read from the delta's sign when absent. */
+	trend = this.useChange("", () => this.renderDelta(), {
+		attribute: "trend",
+		parse: oneOf(["", ...STAT_TRENDS], "")
+	});
+	/** For figures where down is good (costs, errors, load time): down is green, up is red. */
+	invert = this.useChange(false, () => this.renderDelta(), { attribute: "invert" });
+	icon = this.useChange("", (value) => {
+		this._refs.icon.name.set(value);
+		this._refs.icon.hidden = value === "";
+	}, { attribute: "icon" });
+	/** A note under the figure: "vs. last month". */
+	caption = this.useChange("", (value) => {
+		this._refs.caption.textContent = value;
+		this._refs.caption.hidden = value === "";
+	}, { attribute: "caption" });
+	/** Recent values, oldest first, drawn as a sparkline: `[4, 6, 5, 9, 12]`. */
+	points = this.useChange([], () => this.renderSparkline(), {
+		attribute: "points",
+		parse: jsonOf([])
+	});
+	_refs = this.useRefs((ref) => ({
+		caption: ref(".caption"),
+		delta: ref(".delta"),
+		deltaText: ref(".delta-text"),
+		icon: ref(".icon"),
+		label: ref(".label"),
+		spark: ref(".spark"),
+		trendIcon: ref(".trend-icon"),
+		value: ref(".value")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "stat",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					class: "top",
+					children: [/* @__PURE__ */ jsx("span", { class: "label" }), /* @__PURE__ */ jsx(JlIcon, {
+						class: "icon",
+						size: ICON_SIZE,
+						hidden: true
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "figure",
+					children: [/* @__PURE__ */ jsx("span", { class: "value" }), /* @__PURE__ */ jsxs("span", {
+						class: "delta",
+						hidden: true,
+						children: [/* @__PURE__ */ jsx(JlIcon, {
+							class: "trend-icon",
+							size: TREND_ICON_SIZE
+						}), /* @__PURE__ */ jsx("span", { class: "delta-text" })]
+					})]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					class: "caption",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "spark",
+					"aria-hidden": "true",
+					hidden: true
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_stat_default}`;
+	}
+	effectiveTrend() {
+		return this.trend.get() || trendOfDelta(this.delta.get());
+	}
+	renderDelta() {
+		const delta = this.delta.get();
+		const trend = this.effectiveTrend();
+		const moods = this.invert.get() ? INVERTED_MOODS : TREND_MOODS;
+		this._refs.deltaText.textContent = delta;
+		this._refs.delta.hidden = delta === "";
+		this._refs.trendIcon.name.set(TREND_ICONS[trend]);
+		this.reflect("direction", trend);
+		this.reflect("mood", moods[trend]);
+	}
+	renderSparkline() {
+		const values = this.points.get();
+		const points = sparklinePoints(isNumberList(values) ? values : [], SPARK_BOX);
+		const spark = this._refs.spark;
+		spark.hidden = points.length === 0;
+		if (points.length === 0) {
+			spark.replaceChildren();
+			return;
+		}
+		const svg = document.createElementNS(SVG_NS, "svg");
+		svg.setAttribute("viewBox", `0 0 ${SPARK_BOX.width} ${SPARK_BOX.height}`);
+		svg.setAttribute("preserveAspectRatio", "none");
+		const area = document.createElementNS(SVG_NS, "polygon");
+		area.setAttribute("class", "area");
+		area.setAttribute("points", areaAttribute(points, SPARK_BOX));
+		const line = document.createElementNS(SVG_NS, "polyline");
+		line.setAttribute("class", "line");
+		line.setAttribute("points", pointsAttribute(points));
+		svg.append(area, line);
+		spark.replaceChildren(svg);
+	}
+};
+JlStat.register();
+export { JlStat, STAT_TRENDS };

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

@@ -0,0 +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";
+export { jl_steps_default as default };

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

@@ -0,0 +1,44 @@
+import { JlElement } from '../base/jl-element';
+import type { StepItem, StepsOrientation } from '../types/jl-steps.types';
+export declare const STEPS_ORIENTATIONS: readonly StepsOrientation[];
+/**
+ * The steps of a process and where people are in it: done steps show a check, the current one is in the accent
+ * colour. With `clickable`, people can go back to a done step; `change` fires with its index.
+ */
+export declare class JlSteps extends JlElement {
+    static readonly selector = "jl-steps";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: number;
+    }>>;
+    readonly items: Readonly<Readonly<{
+        get(): StepItem[];
+        set(setter: StepItem[] | ((prevState: StepItem[]) => StepItem[])): void;
+    }>>;
+    /** The index of the current step, from 0; the number of steps when all are done. */
+    readonly current: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly orientation: Readonly<Readonly<{
+        get(): StepsOrientation;
+        set(setter: ((prevState: StepsOrientation) => StepsOrientation) | StepsOrientation): void;
+    }>>;
+    /** Done steps become buttons that go back to them. */
+    readonly clickable: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The list's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private render;
+    private step;
+    /** Goes back to a done step people picked, and says so. */
+    private goBackTo;
+}

package/dist/molecules/jl-steps.js

@@ -0,0 +1,118 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber, jsonOf, oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import jl_steps_default from "./jl-steps.css_raw.js";
+import { css } from "@jadis/core";
+import { Check } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-steps.tsx
+registerIcons({ check: Check });
+var STEPS_ORIENTATIONS = ["horizontal", "vertical"];
+var CHECK_SIZE = 14;
+var MAX_STEPS = 100;
+var DEFAULT_LABEL = "Progress";
+var STATUS_TEXT = {
+	current: ", current step",
+	done: ", completed",
+	upcoming: ""
+};
+var statusOf = (index, current) => {
+	if (index < current) return "done";
+	return index === current ? "current" : "upcoming";
+};
+/**
+* The steps of a process and where people are in it: done steps show a check, the current one is in the accent
+* colour. With `clickable`, people can go back to a done step; `change` fires with its index.
+*/
+var JlSteps = class extends JlElement {
+	static selector = "jl-steps";
+	events = this.useEvents();
+	items = this.useChange([], () => this.render(), {
+		attribute: "items",
+		parse: jsonOf([])
+	});
+	/** The index of the current step, from 0; the number of steps when all are done. */
+	current = this.useChange(0, () => this.render(), {
+		attribute: "current",
+		parse: clampedNumber(0, 0, MAX_STEPS)
+	});
+	orientation = this.useChange("horizontal", (value) => this.reflect("orientation", value), {
+		attribute: "orientation",
+		parse: oneOf(STEPS_ORIENTATIONS, "horizontal")
+	});
+	/** Done steps become buttons that go back to them. */
+	clickable = this.useChange(false, () => this.render(), { attribute: "clickable" });
+	/** The list's name for screen readers. */
+	label = this.useChange(DEFAULT_LABEL, (value) => {
+		this._refs.list.setAttribute("aria-label", value || DEFAULT_LABEL);
+	}, { attribute: "label" });
+	_refs = this.useRefs((ref) => ({ list: ref("ol") }));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("ol", { attrs: { part: "base" } });
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_steps_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.list, "click", (event) => {
+			const target = event.target.closest("button[data-index]");
+			if (target !== null) this.goBackTo(Number(target.dataset.index));
+		});
+	}
+	render() {
+		const current = this.current.get();
+		this._refs.list.replaceChildren(...this.items.get().map((item, index) => this.step(item, index, statusOf(index, current))));
+	}
+	step(item, index, status) {
+		const content = [/* @__PURE__ */ jsx("span", {
+			class: "marker",
+			"aria-hidden": "true",
+			children: status === "done" ? /* @__PURE__ */ jsx(JlIcon, {
+				name: "check",
+				size: CHECK_SIZE
+			}) : String(index + 1)
+		}), /* @__PURE__ */ jsxs("span", {
+			class: "text",
+			children: [/* @__PURE__ */ jsxs("span", {
+				class: "label",
+				children: [item.label, /* @__PURE__ */ jsx("span", {
+					class: "sr-only",
+					children: STATUS_TEXT[status]
+				})]
+			}), item.description === void 0 ? "" : /* @__PURE__ */ jsx("span", {
+				class: "description",
+				children: item.description
+			})]
+		})];
+		const canGoBack = status === "done" && this.clickable.get();
+		return /* @__PURE__ */ jsxs("li", {
+			class: "step",
+			"data-status": status,
+			"aria-current": status === "current" ? "step" : void 0,
+			children: [canGoBack ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				class: "head",
+				"data-index": index,
+				children: content
+			}) : /* @__PURE__ */ jsx("div", {
+				class: "head",
+				tabIndex: status === "current" ? -1 : void 0,
+				children: content
+			}), /* @__PURE__ */ jsx("span", {
+				class: "line",
+				"aria-hidden": "true"
+			})]
+		});
+	}
+	/** Goes back to a done step people picked, and says so. */
+	goBackTo(index) {
+		if (index >= this.current.get()) return;
+		this.current.set(index);
+		this.events.emit("change", index);
+		this._refs.list.querySelector("[aria-current] .head")?.focus();
+	}
+};
+JlSteps.register();
+export { JlSteps, STEPS_ORIENTATIONS };

package/dist/molecules/jl-tab-panel.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-tab-panel.css?raw
+var jl_tab_panel_default = ":host {\n  display: block;\n  border-radius: var(--jl-radius-xs);\n}\n\n/* jl-tabs marks the open panel; the others stay out of the page. */\n:host(:not([selected])) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: none;\n  box-shadow: var(--jl-focus-ring);\n}\n";
+export { jl_tab_panel_default as default };

package/dist/molecules/jl-tab-panel.d.ts

@@ -0,0 +1,35 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * One panel of a `jl-tabs`: its content, and what its tab shows (`label`, `icon`, `badge`). The tabs open one
+ * panel at a time and mark it `selected`; outside of `jl-tabs` a panel shows nothing.
+ */
+export declare class JlTabPanel extends JlElement {
+    static readonly selector = "jl-tab-panel";
+    /** What `jl-tabs`'s `value` names to open this panel; its position in the tabs when empty. */
+    readonly name: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The tab's text, and the panel's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** An icon before the tab's text. */
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** A short count or word after the tab's text: "3", "New". */
+    readonly badge: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _internals;
+    templateHtml(): Node;
+    templateCss(): string;
+}

package/dist/molecules/jl-tab-panel.js

@@ -0,0 +1,35 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import jl_tab_panel_default from "./jl-tab-panel.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-tab-panel.tsx
+var ROLE = "tabpanel";
+/**
+* One panel of a `jl-tabs`: its content, and what its tab shows (`label`, `icon`, `badge`). The tabs open one
+* panel at a time and mark it `selected`; outside of `jl-tabs` a panel shows nothing.
+*/
+var JlTabPanel = class extends JlElement {
+	static selector = "jl-tab-panel";
+	/** What `jl-tabs`'s `value` names to open this panel; its position in the tabs when empty. */
+	name = this.useChange("", (value) => this.reflect("name", value), { attribute: "name" });
+	/** The tab's text, and the panel's name for screen readers. */
+	label = this.useChange("", (value) => {
+		this.reflect("label", value);
+		this._internals.ariaLabel = value === "" ? null : value;
+	}, { attribute: "label" });
+	/** An icon before the tab's text. */
+	icon = this.useChange("", (value) => this.reflect("icon", value), { attribute: "icon" });
+	/** A short count or word after the tab's text: "3", "New". */
+	badge = this.useChange("", (value) => this.reflect("badge", value), { attribute: "badge" });
+	disabled = this.useChange(false, (value) => this.reflect("disabled", value), { attribute: "disabled" });
+	_internals = Object.assign(this.attachInternals(), { role: ROLE });
+	templateHtml() {
+		return /* @__PURE__ */ jsx("slot", {});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_tab_panel_default}`;
+	}
+};
+JlTabPanel.register();
+export { JlTabPanel };