@syware/jlib 0.5.1 → 0.7.0

package/dist/lib/time.js

@@ -7,8 +7,7 @@ var HOUR_S = 3600;
 var DAY_S = HOURS_PER_DAY * HOUR_S;
 var NOW_UNDER_S = 45;
 var MINUTES_UNDER_S = 2700;
-var HOURS_UNDER_S = 22 * HOUR_S;
-var DAYS_UNDER_S = 7 * DAY_S;
+var DAYS_UNDER = 7;
 /** A number of one unit, as the language writes it short: "33 secs", "3 min", "2 Std.". */
 var unitText = (value, unit, locale) => new Intl.NumberFormat(locale, {
 	maximumFractionDigits: 0,
@@ -27,34 +26,43 @@ function pair(first, second, locale) {
 }
 /**
 * A duration in the units that read best: "< 1 sec" under a second (never "0.0 s"), then seconds, minutes, hours
-* and minutes, days and hours.
+* and minutes, days and hours. The unit is chosen once rounded: 59.6 seconds is "1 min", not "60 secs". Not a
+* number gives "".
 */
 function formatDuration(milliseconds, locale) {
+	if (!Number.isFinite(milliseconds)) return "";
 	const seconds = Math.max(0, milliseconds) / SECOND_MS;
 	if (seconds < 1) return `< ${unitText(1, "second", locale)}`;
-	if (seconds < MINUTE_S) return unitText(Math.round(seconds), "second", locale);
-	if (seconds < HOUR_S) return unitText(Math.round(seconds / MINUTE_S), "minute", locale);
-	if (seconds < DAY_S) {
-		const minutes = Math.round(seconds / MINUTE_S);
-		return pair([Math.floor(minutes / MINUTES_PER_HOUR), "hour"], [minutes % MINUTES_PER_HOUR, "minute"], locale);
-	}
+	const wholeSeconds = Math.round(seconds);
+	if (wholeSeconds < MINUTE_S) return unitText(wholeSeconds, "second", locale);
+	const minutes = Math.round(seconds / MINUTE_S);
+	if (minutes < MINUTES_PER_HOUR) return unitText(minutes, "minute", locale);
+	if (minutes < 1440) return pair([Math.floor(minutes / MINUTES_PER_HOUR), "hour"], [minutes % MINUTES_PER_HOUR, "minute"], locale);
 	const hours = Math.round(seconds / HOUR_S);
 	return pair([Math.floor(hours / HOURS_PER_DAY), "day"], [hours % HOURS_PER_DAY, "hour"], locale);
 }
+/** Midnight of a date's day, in the reader's time zone. */
+var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+/** How many days on the calendar from `now` to `then`: -1 is yesterday, whatever the hours. */
+var calendarDays = (then, now) => Math.round((startOfDay(then) - startOfDay(now)) / (DAY_S * SECOND_MS));
 /**
-* When something happened, from `now`: "now", "5 minutes ago", "3 hours ago", "yesterday" within a week, then the
-* date ("12 Mar", with the year when it is not this year's). Times to come read the same way: "in 5 minutes".
+* When something happened, from `now`: "now", "5 minutes ago", "3 hours ago" the same day, "yesterday" or "3 days
+* ago" by the calendar within a week, then the date ("12 Mar", with the year when it is not this year's). Times to
+* come read the same way: "in 5 minutes". A date that is not one gives "".
 */
 function formatRelativeTime(date, now, locale) {
 	const then = new Date(date);
-	const seconds = (then.getTime() - new Date(now).getTime()) / SECOND_MS;
+	const today = new Date(now);
+	if (Number.isNaN(then.getTime()) || Number.isNaN(today.getTime())) return "";
+	const seconds = (then.getTime() - today.getTime()) / SECOND_MS;
 	const distance = Math.abs(seconds);
 	const relative = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
 	if (distance < NOW_UNDER_S) return relative.format(0, "second");
 	if (distance < MINUTES_UNDER_S) return relative.format(Math.round(seconds / MINUTE_S), "minute");
-	if (distance < HOURS_UNDER_S) return relative.format(Math.round(seconds / HOUR_S), "hour");
-	if (distance < DAYS_UNDER_S) return relative.format(Math.round(seconds / DAY_S), "day");
-	const sameYear = then.getFullYear() === new Date(now).getFullYear();
+	const days = calendarDays(then, today);
+	if (days === 0) return relative.format(Math.round(seconds / HOUR_S), "hour");
+	if (Math.abs(days) < DAYS_UNDER) return relative.format(days, "day");
+	const sameYear = then.getFullYear() === today.getFullYear();
 	return new Intl.DateTimeFormat(locale, {
 		day: "numeric",
 		month: "short",

package/dist/lib/tree.d.ts

@@ -1,6 +1,15 @@
 import type { TreeAction, TreeItem, VisibleTreeItem } from '../types/jl-tree.types';
-/** An item with `children`, even empty, is a folder. */
+/** An item with `children`, even empty, is a folder; so is a `lazy` one, whose children are not loaded yet. */
 export declare const isFolder: (item: TreeItem) => boolean;
+/** The items of a level: the roots when `parent` is null, otherwise that folder's children (none when unknown). */
+export declare function childrenOf(items: readonly TreeItem[], parent: string | null): readonly TreeItem[];
+/** The tree with a page of items added at the end of a level: the roots when `parent` is null. */
+export declare function withPage(items: readonly TreeItem[], parent: string | null, page: readonly TreeItem[]): TreeItem[];
+/**
+ * The tree with one more row at the end of the levels that have one (`extraRow` gives its id, or null): the row
+ * that loads a level's next page, or loads it again after an error. The keyboard then reaches it as an item.
+ */
+export declare function withExtraRows(items: readonly TreeItem[], extraRow: (parent: string | null) => string | null, parent?: string | null): TreeItem[];
 /** The items a person sees, in order: the roots, and the children of every open folder, with their depth. */
 export declare function visibleItems(items: readonly TreeItem[], expanded: ReadonlySet<string>, level?: number, parent?: string | null): VisibleTreeItem[];
 /** Every item of the tree with its parent, open or not. */

package/dist/lib/tree.js

@@ -1,6 +1,40 @@
 // src/lib/tree.ts
-/** An item with `children`, even empty, is a folder. */
-var isFolder = (item) => Array.isArray(item.children);
+/** An item with `children`, even empty, is a folder; so is a `lazy` one, whose children are not loaded yet. */
+var isFolder = (item) => Array.isArray(item.children) || item.lazy === true;
+/** The items of a level: the roots when `parent` is null, otherwise that folder's children (none when unknown). */
+function childrenOf(items, parent) {
+	if (parent === null) return items;
+	return allItems(items).find((entry) => entry.item.id === parent)?.item.children ?? [];
+}
+/** The tree with a page of items added at the end of a level: the roots when `parent` is null. */
+function withPage(items, parent, page) {
+	if (parent === null) return [...items, ...page];
+	return items.map((item) => {
+		if (item.id === parent) return {
+			...item,
+			children: [...item.children ?? [], ...page]
+		};
+		return item.children === void 0 ? item : {
+			...item,
+			children: withPage(item.children, parent, page)
+		};
+	});
+}
+/**
+* The tree with one more row at the end of the levels that have one (`extraRow` gives its id, or null): the row
+* that loads a level's next page, or loads it again after an error. The keyboard then reaches it as an item.
+*/
+function withExtraRows(items, extraRow, parent = null) {
+	const own = items.map((item) => isFolder(item) ? {
+		...item,
+		children: withExtraRows(item.children ?? [], extraRow, item.id)
+	} : item);
+	const extra = extraRow(parent);
+	return extra === null ? own : [...own, {
+		id: extra,
+		label: ""
+	}];
+}
 /** The items a person sees, in order: the roots, and the children of every open folder, with their depth. */
 function visibleItems(items, expanded, level = 1, parent = null) {
 	return items.flatMap((item) => {
@@ -86,4 +120,4 @@ function treeKeyAction(items, expanded, focused, key) {
 	const index = visible.findIndex((entry) => entry.item.id === focused);
 	return handler(visible, Math.max(0, index), expanded);
 }
-export { allItems, isFolder, treeKeyAction, visibleItems, withExpanded };
+export { allItems, childrenOf, isFolder, treeKeyAction, visibleItems, withExpanded, withExtraRows, withPage };

package/dist/lib/trigger.js

@@ -1,6 +1,6 @@
 // src/lib/trigger.ts
 var NATIVE_FOCUSABLE = "a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]";
-var BASE_PART = "[part~=\"base\"]";
+var BASE_PART = "[part~=\"base\"]:not([hidden])";
 /**
 * The element that carries a trigger's accessible state: the inner `base` part of a component (where its focus
 * and its name are), or else the element itself.

package/dist/molecules/jl-account-button.css_raw.js

@@ -1,3 +1,3 @@
 // src/molecules/jl-account-button.css?raw
-var jl_account_button_default = ":host {\n  display: block;\n}\n\n.base {\n  display: flex;\n  width: 100%;\n  padding: 6px 8px;\n  border: 0;\n  border-radius: var(--jl-radius-sm);\n  background: transparent;\n  color: var(--jl-text);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n.base:hover {\n  background: var(--jl-surface-2);\n}\n\n.content {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\njl-avatar {\n  flex: none;\n}\n\n.text {\n  display: grid;\n  min-width: 0;\n  line-height: 1.3;\n}\n\n.name,\n.description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.name {\n  font-size: var(--jl-font-sm);\n  font-weight: 650;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n/* The avatar alone, round. */\n:host([compact]) {\n  display: inline-block;\n}\n\n:host([compact]) .base {\n  width: auto;\n  padding: 2px;\n  border-radius: var(--jl-radius-pill);\n}\n\n:host([compact]) .text {\n  display: none;\n}\n";
+var jl_account_button_default = ":host {\n  display: block;\n}\n\n.base {\n  display: flex;\n  width: 100%;\n  padding: 6px 8px;\n  border: 0;\n  border-radius: var(--jl-radius-sm);\n  background: transparent;\n  color: var(--jl-text);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n.base:hover {\n  background: var(--jl-surface-2);\n}\n\n.content {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\njl-avatar {\n  flex: none;\n}\n\n.text {\n  display: grid;\n  min-width: 0;\n  line-height: 1.3;\n}\n\n.name,\n.description {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.name {\n  font-size: var(--jl-font-sm);\n  font-weight: 650;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n/* The avatar alone, round. */\n:host([compact]) {\n  display: inline-block;\n}\n\n:host([compact]) .base {\n  width: auto;\n  padding: 2px;\n  border-radius: var(--jl-radius-pill);\n}\n\n:host([compact]) .text {\n  display: none;\n}\n\n/* Their account page is the one shown: marked as the side nav marks its current place. */\n\n:host([current]) .base {\n  background: var(--jl-accent-soft);\n}\n\n:host([current]) .name {\n  color: var(--jl-accent);\n}\n\n:host([current][compact]) .base {\n  box-shadow: 0 0 0 2px var(--jl-accent);\n}\n";
 export { jl_account_button_default as default };

package/dist/molecules/jl-account-button.d.ts

@@ -2,7 +2,8 @@ import { JlElement } from '../base/jl-element';
 /**
  * The person signed in, where the frame of an app shows them (the foot of the side nav, a phone's top bar): their
  * avatar, their name, and a line under it such as their role. With an `href` it is a link to their account, else a
- * button that fires `press` (to open a menu). `compact` keeps the avatar alone, the name as its tooltip.
+ * button that fires `press` (to open a menu). `compact` keeps the avatar alone, the name as its tooltip; `current`
+ * marks it while their account page is the one shown.
  */
 export declare class JlAccountButton extends JlElement {
     static readonly selector = "jl-account-button";
@@ -33,6 +34,11 @@ export declare class JlAccountButton extends JlElement {
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
+    /** Their account page is the one shown: marked as the side nav marks its current place. */
+    readonly current: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
     private readonly _refs;
     focus(options?: FocusOptions): void;
     templateHtml(): Node;
@@ -41,6 +47,7 @@ export declare class JlAccountButton extends JlElement {
     private control;
     /** Moves the content into the link or back into the button. */
     private renderLink;
+    private renderCurrent;
     /** Its name for screen readers and its tooltip: the name, then the line under it. */
     private renderLabel;
 }

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

@@ -9,7 +9,8 @@ import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
 /**
 * The person signed in, where the frame of an app shows them (the foot of the side nav, a phone's top bar): their
 * avatar, their name, and a line under it such as their role. With an `href` it is a link to their account, else a
-* button that fires `press` (to open a menu). `compact` keeps the avatar alone, the name as its tooltip.
+* button that fires `press` (to open a menu). `compact` keeps the avatar alone, the name as its tooltip; `current`
+* marks it while their account page is the one shown.
 */
 var JlAccountButton = class extends JlElement {
 	static selector = "jl-account-button";
@@ -31,8 +32,10 @@ var JlAccountButton = class extends JlElement {
 	href = this.useChange("", () => this.renderLink(), { attribute: "href" });
 	/** The avatar alone. */
 	compact = this.useChange(false, (value) => this.reflect("compact", value), { attribute: "compact" });
+	/** Their account page is the one shown: marked as the side nav marks its current place. */
+	current = this.useChange(false, (value) => this.renderCurrent(value), { attribute: "current" });
 	_refs = this.useRefs((ref) => ({
-		avatar: ref("jl-avatar"),
+		avatar: ref(JlAvatar),
 		button: ref("button"),
 		content: ref(".content"),
 		description: ref(".description"),
@@ -84,6 +87,10 @@ var JlAccountButton = class extends JlElement {
 		link.hidden = href === "";
 		setOrRemove(link, "href", href);
 	}
+	renderCurrent(current) {
+		this.reflect("current", current);
+		for (const control of [this._refs.button, this._refs.link]) setOrRemove(control, "aria-current", current ? "page" : "");
+	}
 	/** Its name for screen readers and its tooltip: the name, then the line under it. */
 	renderLabel() {
 		const label = [this.name.get(), this.description.get()].filter((part) => part !== "").join(", ");

package/dist/molecules/jl-alert.js

@@ -3,8 +3,9 @@ import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { TONES, TONE_ICONS, TONE_ICON_FILLED } from "../lib/options.js";
-import { hasSlotted } from "../lib/slots.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { hasSlotted } from "../lib/slots.js";
 import { JlButton } from "../atoms/jl-button.js";
 import jl_alert_default from "./jl-alert.css_raw.js";
 import { css } from "@jadis/core";
@@ -115,7 +116,7 @@ var JlAlert = class extends JlElement {
 					class: "close",
 					variant: "ghost",
 					icon: "x",
-					hint: "Dismiss",
+					hint: jlText("dismiss"),
 					size: "sm",
 					hidden: true
 				})

package/dist/molecules/jl-breadcrumb.js

@@ -2,6 +2,7 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { jsonOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
 import jl_breadcrumb_default from "./jl-breadcrumb.css_raw.js";
 import { css } from "@jadis/core";
@@ -14,7 +15,6 @@ registerIcons({
 });
 var ICON_SIZE = 15;
 var SEPARATOR_SIZE = 14;
-var DEFAULT_LABEL = "Breadcrumb";
 var MIN_MAX = 2;
 /** The crumbs shown: all of them, or the first, a gap for the middle, and the last `max - 1`. */
 function visibleCrumbs(items, max, expanded) {
@@ -43,8 +43,8 @@ var JlBreadcrumb = class extends JlElement {
 	/** The most items shown before the middle folds; 0 never folds. */
 	max = this.useChange(0, () => this.render(), { attribute: "max" });
 	/** The trail's name for screen readers. */
-	label = this.useChange(DEFAULT_LABEL, (value) => {
-		this._refs.nav.setAttribute("aria-label", value || DEFAULT_LABEL);
+	label = this.useChange(jlText("breadcrumb"), (value) => {
+		this._refs.nav.setAttribute("aria-label", value || jlText("breadcrumb"));
 	}, { attribute: "label" });
 	_state = { expanded: false };
 	_refs = this.useRefs((ref) => ({

package/dist/molecules/jl-calendar.js

@@ -3,8 +3,9 @@ import { JlFormControl } from "../base/jl-form-control.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove, uniqueId } from "../lib/dom.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { addMonths, calendarDateOf, clampDate, dateAfterKey, dateFormatter, formatMonthTitle, isSameDate, isSameMonth, isWithin, monthGrid, monthHasDaysWithin, parseIsoDate, toIsoDate, weekdayNames } from "../lib/calendar.js";
 import { pageLocale } from "../lib/locale.js";
 import jl_calendar_default from "./jl-calendar.css_raw.js";
@@ -21,7 +22,6 @@ var MONDAY = 1;
 var SUNDAY = 0;
 var SATURDAY = 6;
 var SELECT_KEYS = ["Enter", " "];
-var VALUE_MISSING = "Choose a date.";
 var FULL_DATE = { dateStyle: "full" };
 /** The first day of the week from its attribute: 0 (Sunday) to 6 (Saturday), Monday when absent. */
 var parseWeekday = (value) => Math.round(clampedNumber(MONDAY, SUNDAY, SATURDAY)(value));
@@ -95,7 +95,7 @@ var JlCalendar = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "nav previous",
 					type: "button",
-					"aria-label": "Previous month",
+					"aria-label": jlText("previousMonth"),
 					children: /* @__PURE__ */ jsx(JlIcon, {
 						name: "chevron-left",
 						size: NAV_ICON_SIZE
@@ -109,7 +109,7 @@ var JlCalendar = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "nav next",
 					type: "button",
-					"aria-label": "Next month",
+					"aria-label": jlText("nextMonth"),
 					children: /* @__PURE__ */ jsx(JlIcon, {
 						name: "chevron-right",
 						size: NAV_ICON_SIZE
@@ -299,7 +299,7 @@ var JlCalendar = class extends JlFormControl {
 	}
 	renderValidity() {
 		if (this.required.get() && parseIsoDate(this.value.get()) === null) {
-			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING);
+			this.internals.setValidity({ valueMissing: true }, jlText("chooseDateMissing"));
 			return;
 		}
 		this.internals.setValidity({});

package/dist/molecules/jl-chip-group.js

@@ -3,8 +3,9 @@ import { JlFormControl } from "../base/jl-form-control.js";
 import { jsonOf, oneOf, stringList } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove } from "../lib/dom.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import { rovingIndex } from "../lib/roving-index.js";
 import jl_chip_group_default from "./jl-chip-group.css_raw.js";
 import { css } from "@jadis/core";
@@ -19,7 +20,6 @@ var ICON_SIZES = {
 };
 var SELECTED_ICON = "check";
 var CHIP_SELECTOR = ".chip";
-var VALUE_MISSING = "Please select one of these options.";
 /** The keys that move between the chips; with one choice, the choice moves too, as with native radios. */
 var MOVES = /* @__PURE__ */ new Map([
 	["ArrowDown", "next"],
@@ -252,7 +252,7 @@ var JlChipGroup = class extends JlFormControl {
 			this.internals.setValidity({});
 			return;
 		}
-		this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this.chips()[0] ?? this._refs.group);
+		this.internals.setValidity({ valueMissing: true }, jlText("selectOption"), this.chips()[0] ?? this._refs.group);
 	}
 };
 JlChipGroup.register();

package/dist/molecules/jl-code-block.css_raw.js

@@ -1,3 +1,3 @@
 // src/molecules/jl-code-block.css?raw
-var jl_code_block_default = ":host {\n  display: block;\n  min-width: 0;\n}\n\nfigure {\n  position: relative;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface-2);\n  overflow: hidden;\n}\n\nheader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: 38px;\n  padding: 0 52px 0 14px;\n  border-bottom: 1px solid var(--jl-line);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n.heading {\n  overflow: hidden;\n  color: var(--jl-text-2);\n  font-family: var(--jl-font-mono);\n  font-weight: 500;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.language {\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\n.body {\n  display: flex;\n  min-width: 0;\n}\n\n.gutter,\npre {\n  padding: 14px 16px;\n  font-family: var(--jl-font-mono);\n  font-size: 12.5px;\n  line-height: 1.7;\n  font-variant-ligatures: no-contextual;\n}\n\n.gutter {\n  flex: none;\n  padding-right: 4px;\n  color: var(--jl-faint);\n  text-align: right;\n  white-space: pre;\n  user-select: none;\n}\n\npre {\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n  padding-right: 48px;\n  overflow-x: auto;\n  color: var(--jl-text);\n  tab-size: 2;\n}\n\n:host([wrap]) pre {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.copy {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  background: var(--jl-surface-2);\n  border-radius: var(--jl-radius-sm);\n}\n\n:host(:not([has-header])) .copy {\n  opacity: 0.6;\n  transition: opacity var(--jl-fast) var(--jl-ease);\n}\n\n:host(:not([has-header])) figure:hover .copy,\n.copy:focus-within {\n  opacity: 1;\n}\n\n.tok-comment {\n  color: var(--jl-code-comment);\n  font-style: italic;\n}\n\n.tok-string {\n  color: var(--jl-code-string);\n}\n\n.tok-number {\n  color: var(--jl-code-number);\n}\n\n.tok-keyword {\n  color: var(--jl-code-keyword);\n}\n\n.tok-tag {\n  color: var(--jl-code-tag);\n}\n\n.tok-attribute {\n  color: var(--jl-code-attribute);\n}\n\n.tok-property {\n  color: var(--jl-code-property);\n}\n\n.tok-function {\n  color: var(--jl-code-function);\n}\n\n.tok-punctuation {\n  color: var(--jl-muted);\n}\n";
+var jl_code_block_default = ":host {\n  display: block;\n  min-width: 0;\n  --max-height: none;\n}\n\nfigure {\n  position: relative;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface-2);\n  overflow: hidden;\n}\n\nheader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: 38px;\n  padding: 0 52px 0 14px;\n  border-bottom: 1px solid var(--jl-line);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n.heading {\n  overflow: hidden;\n  color: var(--jl-text-2);\n  font-family: var(--jl-font-mono);\n  font-weight: 500;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.language {\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\n.body {\n  display: flex;\n  min-width: 0;\n  max-height: var(--max-height);\n  overflow-y: auto;\n}\n\n.gutter,\npre {\n  padding: 14px 16px;\n  font-family: var(--jl-font-mono);\n  font-size: 12.5px;\n  line-height: 1.7;\n  font-variant-ligatures: no-contextual;\n}\n\n.gutter {\n  flex: none;\n  padding-right: 4px;\n  color: var(--jl-faint);\n  text-align: right;\n  white-space: pre;\n  user-select: none;\n}\n\npre {\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n  padding-right: 48px;\n  overflow-x: auto;\n  color: var(--jl-text);\n  tab-size: 2;\n}\n\n:host([wrap]) pre {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.copy {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  background: var(--jl-surface-2);\n  border-radius: var(--jl-radius-sm);\n}\n\n:host(:not([has-header])) .copy {\n  opacity: 0.6;\n  transition: opacity var(--jl-fast) var(--jl-ease);\n}\n\n:host(:not([has-header])) figure:hover .copy,\n.copy:focus-within {\n  opacity: 1;\n}\n\n.tok-comment {\n  color: var(--jl-code-comment);\n  font-style: italic;\n}\n\n.tok-string {\n  color: var(--jl-code-string);\n}\n\n.tok-number {\n  color: var(--jl-code-number);\n}\n\n.tok-keyword {\n  color: var(--jl-code-keyword);\n}\n\n.tok-tag {\n  color: var(--jl-code-tag);\n}\n\n.tok-attribute {\n  color: var(--jl-code-attribute);\n}\n\n.tok-property {\n  color: var(--jl-code-property);\n}\n\n.tok-function {\n  color: var(--jl-code-function);\n}\n\n.tok-punctuation {\n  color: var(--jl-muted);\n}\n";
 export { jl_code_block_default as default };

package/dist/molecules/jl-code-block.d.ts

@@ -33,6 +33,11 @@ export declare class JlCodeBlock extends JlElement {
         get(): boolean;
         set(setter: boolean | ((prevState: boolean) => boolean)): void;
     }>>;
+    /** A CSS height past which the code scrolls under its header: `320px`, `50vh`; a number is pixels. */
+    readonly maxHeight: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     private readonly _refs;
     templateHtml(): Node;
     templateCss(): string;

package/dist/molecules/jl-code-block.js

@@ -1,8 +1,9 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
-import { highlightedNodes } from "../lib/highlight.js";
 import { dedent } from "../lib/text.js";
+import { cssLength } from "../lib/css-length.js";
+import { highlightedNodes } from "../lib/highlight.js";
 import jl_code_block_default from "./jl-code-block.css_raw.js";
 import { JlCopyButton } from "./jl-copy-button.js";
 import { css } from "@jadis/core";
@@ -41,9 +42,11 @@ var JlCodeBlock = class extends JlElement {
 	}, { attribute: "hide-copy" });
 	/** Wraps long lines instead of scrolling sideways. */
 	wrap = this.useChange(false, (value) => this.reflect("wrap", value), { attribute: "wrap" });
+	/** A CSS height past which the code scrolls under its header: `320px`, `50vh`; a number is pixels. */
+	maxHeight = this.useChange("", (value) => this.style.setProperty("--max-height", value.trim() === "" ? "none" : cssLength(value)), { attribute: "max-height" });
 	_refs = this.useRefs((ref) => ({
 		code: ref("code"),
-		copy: ref("jl-copy-button"),
+		copy: ref(JlCopyButton),
 		gutter: ref(".gutter"),
 		header: ref("header"),
 		heading: ref(".heading"),

package/dist/molecules/jl-combobox.js

@@ -4,8 +4,9 @@ import { jsonOf, oneOf } from "../lib/attributes.js";
 import { followAnchor } from "../lib/floating.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove, uniqueId } from "../lib/dom.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { keepInView } from "../lib/keep-in-view.js";
 import { edgeEnabledIndex, filterOptions, foldText, matchParts, nextEnabledIndex } from "../lib/option-filter.js";
 import jl_combobox_default from "./jl-combobox.css_raw.js";
@@ -23,8 +24,6 @@ var ACTION_ICON_SIZE = 14;
 var CHECK_SIZE = 14;
 var NONE = -1;
 var PLACEMENT = "bottom-start";
-var VALUE_MISSING = "Choose an option.";
-var DEFAULT_EMPTY_TEXT = "No results";
 /** A JSON attribute that should hold a list of options; anything else gives none. */
 var parseOptions = (value) => {
 	const parsed = jsonOf([])(value);
@@ -57,7 +56,7 @@ var JlCombobox = class extends JlFormControl {
 	/** Shows a button that empties the field while it holds text. */
 	clearable = this.useChange(false, () => this.renderClear(), { attribute: "clearable" });
 	/** What the list says when no option matches. */
-	emptyText = this.useChange(DEFAULT_EMPTY_TEXT, (value) => {
+	emptyText = this.useChange(jlText("noResults"), (value) => {
 		this._refs.empty.textContent = value;
 	}, { attribute: "empty-text" });
 	required = this.useChange(false, (value) => {
@@ -112,7 +111,7 @@ var JlCombobox = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "action clear",
 					type: "button",
-					"aria-label": "Clear",
+					"aria-label": jlText("clear"),
 					tabIndex: -1,
 					hidden: true,
 					children: /* @__PURE__ */ jsx(JlIcon, {
@@ -123,7 +122,7 @@ var JlCombobox = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "action toggle",
 					type: "button",
-					"aria-label": "Show the options",
+					"aria-label": jlText("showOptions"),
 					tabIndex: -1,
 					children: /* @__PURE__ */ jsx(JlIcon, {
 						name: "chevron-down",
@@ -429,7 +428,7 @@ var JlCombobox = class extends JlFormControl {
 	}
 	renderValidity() {
 		if (this.required.get() && this.value.get() === "") {
-			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.native);
+			this.internals.setValidity({ valueMissing: true }, jlText("chooseOption"), this._refs.native);
 			return;
 		}
 		this.internals.setValidity({});

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

@@ -3,6 +3,7 @@ import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
+import { jlText } from "../lib/texts.js";
 import { JlButton } from "../atoms/jl-button.js";
 import jl_copy_button_default from "./jl-copy-button.css_raw.js";
 import { css } from "@jadis/core";
@@ -28,12 +29,12 @@ var JlCopyButton = class extends JlElement {
 		parse: oneOf(CONTROL_SIZES, "sm")
 	});
 	_timer = { id: 0 };
-	_refs = this.useRefs((ref) => ({ button: ref("jl-button") }));
+	_refs = this.useRefs((ref) => ({ button: ref(JlButton) }));
 	templateHtml() {
 		return /* @__PURE__ */ jsx(JlButton, {
 			variant: "ghost",
 			icon: COPY_ICON,
-			hint: "Copy"
+			hint: jlText("copy")
 		});
 	}
 	templateCss() {
@@ -55,12 +56,12 @@ var JlCopyButton = class extends JlElement {
 	confirm() {
 		const button = this._refs.button;
 		button.icon.set(DONE_ICON);
-		button.hint.set("Copied");
+		button.hint.set(jlText("copied"));
 		this.reflect("copied", true);
 		window.clearTimeout(this._timer.id);
 		this._timer.id = window.setTimeout(() => {
 			button.icon.set(COPY_ICON);
-			button.hint.set("Copy");
+			button.hint.set(jlText("copy"));
 			this.reflect("copied", false);
 		}, CONFIRM_MS);
 	}

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

@@ -4,8 +4,9 @@ import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { followAnchor } from "../lib/floating.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove, uniqueId } from "../lib/dom.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.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";
@@ -24,8 +25,6 @@ var PLACEMENT = "bottom-start";
 var MONDAY = 1;
 var SUNDAY = 0;
 var SATURDAY = 6;
-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 in digits, in the `locale`'s order (`25.10.2026`, `10/25/2026`), and opens a
@@ -81,7 +80,7 @@ var JlDatePicker = class extends JlFormControl {
 		openOnPress: null
 	};
 	_refs = this.useRefs((ref) => ({
-		calendar: ref("jl-calendar"),
+		calendar: ref(JlCalendar),
 		clear: ref(".clear"),
 		control: ref(".control"),
 		native: ref("input"),
@@ -117,7 +116,7 @@ var JlDatePicker = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "action clear",
 					type: "button",
-					"aria-label": "Clear",
+					"aria-label": jlText("clear"),
 					tabIndex: -1,
 					hidden: true,
 					children: /* @__PURE__ */ jsx(JlIcon, {
@@ -128,7 +127,7 @@ var JlDatePicker = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "action open",
 					type: "button",
-					"aria-label": DIALOG_LABEL,
+					"aria-label": jlText("chooseDate"),
 					"aria-haspopup": "dialog",
 					"aria-expanded": "false",
 					"aria-controls": this._popupId,
@@ -143,7 +142,7 @@ var JlDatePicker = class extends JlFormControl {
 			id: this._popupId,
 			popover: "auto",
 			role: "dialog",
-			"aria-label": DIALOG_LABEL,
+			"aria-label": jlText("chooseDate"),
 			attrs: { part: "popup" },
 			children: /* @__PURE__ */ jsx(JlCalendar, { class: "calendar" })
 		})] });
@@ -314,7 +313,7 @@ var JlDatePicker = class extends JlFormControl {
 	}
 	renderMissing(anchor) {
 		if (this.required.get()) {
-			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, anchor);
+			this.internals.setValidity({ valueMissing: true }, jlText("chooseDateMissing"), anchor);
 			return;
 		}
 		this.internals.setValidity({});

package/dist/molecules/jl-empty.js

@@ -2,8 +2,8 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
-import { hasSlotted } from "../lib/slots.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { hasSlotted } from "../lib/slots.js";
 import jl_empty_default from "./jl-empty.css_raw.js";
 import { css } from "@jadis/core";
 import { Inbox } from "lucide";
@@ -43,7 +43,7 @@ var JlEmpty = class extends JlElement {
 		actions: ref(".actions"),
 		description: ref(".description"),
 		heading: ref(".heading"),
-		icon: ref("jl-icon"),
+		icon: ref(JlIcon),
 		medallion: ref(".medallion"),
 		slot: ref("slot")
 	}));

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-facts.css?raw
+var jl_facts_default = ":host {\n  display: block;\n  container-type: inline-size;\n}\n\n:host([empty]) {\n  display: none;\n}\n\n.facts {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 6px 24px;\n  margin: 0;\n  font-size: var(--jl-font-md);\n}\n\n/* Each pair is a row of the grid: the labels line up in one column, the values in the other. */\n.fact {\n  display: contents;\n}\n\ndt {\n  color: var(--jl-muted);\n}\n\ndd {\n  min-width: 0;\n  margin: 0;\n  color: var(--jl-text);\n  overflow-wrap: anywhere;\n}\n\ncode {\n  font-family: var(--jl-font-mono);\n  font-size: var(--jl-font-sm);\n  word-break: break-all;\n}\n\na {\n  color: var(--jl-accent);\n  text-decoration: none;\n}\n\na:hover {\n  color: var(--jl-accent-strong);\n  text-decoration: underline;\n}\n\n:host([orientation=\"vertical\"]) .facts {\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));\n  gap: 16px 24px;\n}\n\n:host([orientation=\"vertical\"]) .fact {\n  display: grid;\n  gap: 2px;\n  align-content: start;\n}\n\n@container (width < 420px) {\n  .facts {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 12px;\n  }\n\n  .fact {\n    display: grid;\n    gap: 2px;\n  }\n}\n";
+export { jl_facts_default as default };

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

@@ -0,0 +1,35 @@
+import { JlElement } from '../base/jl-element';
+import type { Fact, FactRenderer, FactsOrientation } from '../types/jl-facts.types';
+export declare const FACTS_ORIENTATIONS: readonly FactsOrientation[];
+/**
+ * The facts about one thing, label and value: an object's size and digest, an order's customer and date. Facts
+ * without a value are left out, and an element with none takes no room. Values can be code (monospace, broken
+ * anywhere), links, or drawn by code (`renderers`, by a fact's `key`). Narrower than 420 pixels, labels go over
+ * their values.
+ */
+export declare class JlFacts extends JlElement {
+    static readonly selector = "jl-facts";
+    readonly items: Readonly<Readonly<{
+        get(): Fact[];
+        set(setter: Fact[] | ((prevState: Fact[]) => Fact[])): void;
+    }>>;
+    readonly orientation: Readonly<Readonly<{
+        get(): FactsOrientation;
+        set(setter: ((prevState: FactsOrientation) => FactsOrientation) | FactsOrientation): void;
+    }>>;
+    /** Draws the values of some facts by code, by their `key`: `{ type: (fact) => <JlBadge label={…} /> }`. */
+    readonly renderers: Readonly<Readonly<{
+        get(): Record<string, FactRenderer>;
+        set(setter: Record<string, FactRenderer> | ((prevState: Record<string, FactRenderer>) => Record<string, FactRenderer>)): 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;
+    private render;
+    private valueNode;
+}