@syware/jlib 0.6.0 → 0.7.0

package/dist/lib/icons.js

@@ -1,7 +1,8 @@
 import { CircleAlert, createElement } from "lucide";
 // src/lib/icons.ts
 var FALLBACK = CircleAlert;
-var STROKE_WIDTH = 1.9;
+/** The width of every glyph's strokes, on lucide's 24-unit grid. */
+var ICON_STROKE_WIDTH = 1.9;
 /**
 * The icons `jl-icon` can draw, by name. It starts empty: each component registers the icons it draws itself, and
 * a page registers the names it writes, so a bundle holds only the icons in use.
@@ -27,13 +28,15 @@ function missing(name) {
 	}
 	return FALLBACK;
 }
+/** An icon's shapes, by its name; a name nobody registered gives a neutral mark instead of nothing. */
+var iconNode = (name) => registry.get(name) ?? missing(name);
 /** An icon as an SVG element; a name nobody registered draws a neutral mark instead of nothing. */
 function iconElement(name, size) {
-	return createElement(registry.get(name) ?? missing(name), {
+	return createElement(iconNode(name), {
 		"aria-hidden": "true",
 		height: size,
-		"stroke-width": STROKE_WIDTH,
+		"stroke-width": ICON_STROKE_WIDTH,
 		width: size
 	});
 }
-export { hasIcon, iconElement, iconNames, registerIcons };
+export { ICON_STROKE_WIDTH, hasIcon, iconElement, iconNames, iconNode, registerIcons };

package/dist/lib/input-list.d.ts

@@ -0,0 +1,12 @@
+/** The rows shown: the values, or one empty row to type the first one in. */
+export declare const rowsOf: (values: readonly string[]) => string[];
+/** The rows with the one at `index` changed. */
+export declare const withRowAt: (rows: readonly string[], index: number, value: string) => string[];
+/** The rows without the one at `index`; one empty row stays when it was the last. */
+export declare const withoutRowAt: (rows: readonly string[], index: number) => string[];
+/** The values kept: the rows people filled in. */
+export declare const filledValues: (rows: readonly string[]) => string[];
+/** Whether another row fits under `max`; none or zero means no limit. */
+export declare const canAddRow: (count: number, max: number) => boolean;
+/** Whether two lists hold the same values in the same order. */
+export declare const sameValues: (left: readonly string[], right: readonly string[]) => boolean;

package/dist/lib/input-list.js

@@ -0,0 +1,14 @@
+// src/lib/input-list.ts
+/** The rows shown: the values, or one empty row to type the first one in. */
+var rowsOf = (values) => values.length === 0 ? [""] : [...values];
+/** The rows with the one at `index` changed. */
+var withRowAt = (rows, index, value) => rows.map((row, at) => at === index ? value : row);
+/** The rows without the one at `index`; one empty row stays when it was the last. */
+var withoutRowAt = (rows, index) => rowsOf(rows.filter((_, at) => at !== index));
+/** The values kept: the rows people filled in. */
+var filledValues = (rows) => rows.filter((row) => row.trim() !== "");
+/** Whether another row fits under `max`; none or zero means no limit. */
+var canAddRow = (count, max) => max <= 0 || count < max;
+/** Whether two lists hold the same values in the same order. */
+var sameValues = (left, right) => left.length === right.length && left.every((value, index) => value === right[index]);
+export { canAddRow, filledValues, rowsOf, sameValues, withRowAt, withoutRowAt };

package/dist/lib/internals.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The internals of a form-associated element. Where the DOM gives them no form methods (jsdom), they get ones that
+ * keep nothing and find every value valid; a browser's are left as they are.
+ */
+export declare function formInternals(element: HTMLElement): ElementInternals;

package/dist/lib/internals.js

@@ -0,0 +1,18 @@
+// src/lib/internals.ts
+/** What a form control asks of its internals that jsdom's lack: with them, a page's unit tests can create it. */
+var FORM_METHODS = {
+	checkValidity: () => true,
+	reportValidity: () => true,
+	setFormValue: () => void 0,
+	setValidity: () => void 0
+};
+/**
+* The internals of a form-associated element. Where the DOM gives them no form methods (jsdom), they get ones that
+* keep nothing and find every value valid; a browser's are left as they are.
+*/
+function formInternals(element) {
+	const internals = element.attachInternals();
+	if (typeof internals.setFormValue === "function") return internals;
+	return Object.assign(internals, FORM_METHODS);
+}
+export { formInternals };

package/dist/lib/palette.js

@@ -3,12 +3,18 @@ import { fuzzyMatch } from "./fuzzy.js";
 /** A match on a keyword counts less than one on the label people read. */
 var KEYWORD_WEIGHT = .5;
 var NO_GROUP = "";
+var RESULT_SCORE = 0;
 function keywordScore(query, keywords) {
 	const scores = keywords.map((keyword) => fuzzyMatch(query, keyword)?.score).filter((score) => score !== void 0);
 	return scores.length === 0 ? null : Math.max(...scores) * KEYWORD_WEIGHT;
 }
 function matchCommand(query, command) {
 	const label = fuzzyMatch(query, command.label);
+	if (command.result === true) return {
+		command,
+		positions: label?.positions ?? [],
+		score: RESULT_SCORE
+	};
 	const keyword = keywordScore(query, command.keywords ?? []);
 	if (label === null && keyword === null) return null;
 	if (label === null) return {

package/dist/lib/resize.d.ts

@@ -0,0 +1,2 @@
+/** Watches elements' sizes; where the DOM has no ResizeObserver, nothing changes size and nothing is watched. */
+export declare const watchSizes: (callback: ResizeObserverCallback) => ResizeObserver;

package/dist/lib/resize.js

@@ -0,0 +1,10 @@
+// src/lib/resize.ts
+/** A stand-in that watches nothing, for a DOM without ResizeObserver (jsdom, which has no layout either). */
+var INERT_OBSERVER = {
+	disconnect: () => void 0,
+	observe: () => void 0,
+	unobserve: () => void 0
+};
+/** Watches elements' sizes; where the DOM has no ResizeObserver, nothing changes size and nothing is watched. */
+var watchSizes = (callback) => typeof ResizeObserver === "function" ? new ResizeObserver(callback) : INERT_OBSERVER;
+export { watchSizes };

package/dist/lib/table.d.ts

@@ -1,4 +1,4 @@
-import type { TableAlign, TableCellFormat, TableColumn, TableRow, TableRowKey, TableSelectionState, TableSortDirection } from '../types/jl-table.types';
+import type { TableAlign, TableCellFormat, TableCellRenderer, TableColumn, TableRow, TableRowKey, TableSelectionState, TableSortDirection } from '../types/jl-table.types';
 export declare const nextSortDirection: (direction: TableSortDirection) => TableSortDirection;
 /** A cell's value as a number, `NaN` when it is not one. */
 export declare function toNumber(value: unknown): number;
@@ -28,3 +28,8 @@ export declare function selectionState(keys: readonly TableRowKey[], selected: R
 export declare function toggleAll(keys: readonly TableRowKey[], selected: ReadonlySet<TableRowKey>): TableRowKey[];
 /** The selection with one row added or taken out. */
 export declare function toggleKey(selected: readonly TableRowKey[], key: TableRowKey, on: boolean): TableRowKey[];
+/**
+ * A renderer of `renderers` written for the page's own type of row: the table hands each renderer back a row the
+ * page gave it, so `cellOf<Order>((order) => <JlLink href={order.href} label={order.name} />)` reads it typed.
+ */
+export declare const cellOf: <Row>(draw: (row: Row) => Node) => TableCellRenderer;

package/dist/lib/table.js

@@ -11,6 +11,10 @@ var DIRECTION_SIGN = {
 	none: 0
 };
 var DATE_FORMAT = { dateStyle: "medium" };
+var DATE_TIME_FORMAT = {
+	dateStyle: "medium",
+	timeStyle: "short"
+};
 var nextSortDirection = (direction) => NEXT_DIRECTION[direction];
 var isEmpty = (value) => value === null || value === void 0 || value === "";
 /** A cell's value as a number, `NaN` when it is not one. */
@@ -31,6 +35,7 @@ var COMPARERS = {
 	badge: (a, b, locale) => String(a).localeCompare(String(b), locale),
 	code: (a, b, locale) => String(a).localeCompare(String(b), locale),
 	date: (a, b) => compareNumbers(toTime(a), toTime(b)),
+	datetime: (a, b) => compareNumbers(toTime(a), toTime(b)),
 	number: (a, b) => compareNumbers(toNumber(a), toNumber(b)),
 	text: (a, b, locale) => String(a).localeCompare(String(b), locale, { numeric: true })
 };
@@ -41,6 +46,7 @@ function isUnorderable(value, format) {
 		badge: () => false,
 		code: () => false,
 		date: () => Number.isNaN(toTime(value)),
+		datetime: () => Number.isNaN(toTime(value)),
 		number: () => Number.isNaN(toNumber(value)),
 		text: () => false
 	}[format]();
@@ -66,6 +72,10 @@ var FORMATTERS = {
 		const time = toTime(value);
 		return Number.isNaN(time) ? String(value) : new Intl.DateTimeFormat(locale, DATE_FORMAT).format(time);
 	},
+	datetime: (value, locale) => {
+		const time = toTime(value);
+		return Number.isNaN(time) ? String(value) : new Intl.DateTimeFormat(locale, DATE_TIME_FORMAT).format(time);
+	},
 	number: (value, locale) => {
 		const number = toNumber(value);
 		return Number.isNaN(number) ? String(value) : new Intl.NumberFormat(locale).format(number);
@@ -107,4 +117,9 @@ function toggleKey(selected, key, on) {
 	const without = selected.filter((candidate) => candidate !== key);
 	return on ? [...without, key] : without;
 }
-export { columnAlign, columnWidth, formatCell, nextSortDirection, rowKeyOf, selectionState, sortRows, toNumber, toTime, toggleAll, toggleKey };
+/**
+* A renderer of `renderers` written for the page's own type of row: the table hands each renderer back a row the
+* page gave it, so `cellOf<Order>((order) => <JlLink href={order.href} label={order.name} />)` reads it typed.
+*/
+var cellOf = (draw) => (row) => draw(row);
+export { cellOf, columnAlign, columnWidth, formatCell, nextSortDirection, rowKeyOf, selectionState, sortRows, toNumber, toTime, toggleAll, toggleKey };

package/dist/lib/text.d.ts

@@ -13,3 +13,5 @@ export type StarredPart = {
  * A lone asterisk stays as it is; empty runs are left out.
  */
 export declare function starredParts(text: string): StarredPart[];
+/** A text with its `{placeholders}` filled; one without a value stays as it is. */
+export declare const fillText: (template: string, values: Readonly<Record<string, string>>) => string;

package/dist/lib/text.js

@@ -22,4 +22,7 @@ function starredParts(text) {
 		text: piece
 	})).filter((part) => part.text !== "");
 }
-export { dedent, starredParts };
+var PLACEHOLDER = /\{(\w+)\}/g;
+/** A text with its `{placeholders}` filled; one without a value stays as it is. */
+var fillText = (template, values) => template.replace(PLACEHOLDER, (whole, key) => values[key] ?? whole);
+export { dedent, fillText, starredParts };

package/dist/lib/texts.d.ts

@@ -0,0 +1,97 @@
+import type { JlTextKey, JlTexts } from '../types/texts.types';
+/**
+ * Every text jlib's components show or say on their own, in English: labels for screen readers, buttons, states,
+ * the defaults of their text inputs. `{placeholders}` are filled when the text is shown.
+ */
+export declare const DEFAULT_TEXTS: {
+    readonly addTag: 'Add at least one tag.';
+    readonly addValue: 'Add a value';
+    readonly back: 'Back';
+    readonly breadcrumb: 'Breadcrumb';
+    readonly browse: 'Browse';
+    readonly chooseDate: 'Choose a date';
+    readonly chooseDateMissing: 'Choose a date.';
+    readonly chooseFile: 'Choose a file.';
+    readonly chooseOption: 'Choose an option.';
+    readonly chooseRating: 'Choose a rating.';
+    readonly chosenFiles: 'Chosen files';
+    readonly clear: 'Clear';
+    readonly clearSearch: 'Clear the search';
+    readonly close: 'Close';
+    readonly closeMenu: 'Close the menu';
+    readonly collapseMenu: 'Collapse the menu';
+    readonly commandPalette: 'Command palette';
+    readonly commandPlaceholder: 'Type a command or search…';
+    readonly commands: 'Commands';
+    readonly copied: 'Copied';
+    readonly copy: 'Copy';
+    readonly decrease: 'Decrease';
+    readonly dismiss: 'Dismiss';
+    readonly downloadCancel: 'Cancel';
+    readonly downloadFailed: 'Not downloaded: {error}';
+    readonly downloadPreparing: 'Preparing the file… {time}';
+    readonly downloadReceived: '{received} received';
+    readonly downloadReceivedOf: '{received} of {total}';
+    readonly downloadSaved: 'Saved as {name}, {size}';
+    readonly dragToConnect: 'Drag to another node to connect';
+    readonly dropFile: 'Drop a file here';
+    readonly dropFiles: 'Drop files here';
+    readonly expandMenu: 'Expand the menu';
+    readonly failedStep: ', failed';
+    readonly fileTooLarge: 'is larger than {size}';
+    readonly fileTooMany: 'is one too many: the field takes a single file';
+    readonly fileUpTo: 'up to {size}';
+    readonly fileWrongType: 'is not an accepted type ({types})';
+    readonly fillField: 'Please fill in this field.';
+    readonly fitView: 'Show every node';
+    readonly flow: 'Flow';
+    readonly hidePassword: 'Hide the password';
+    readonly increase: 'Increase';
+    readonly leave: 'Leave';
+    readonly leaveText: 'Your changes are lost.';
+    readonly loadError: 'This could not be loaded.';
+    readonly loading: 'Loading';
+    readonly loadingMore: 'Loading…';
+    readonly loadStateError: 'Check the connection, then try again. Nothing was changed.';
+    readonly mainNavigation: 'Main';
+    readonly menu: 'Menu';
+    readonly navigation: 'Navigation';
+    readonly nextMonth: 'Next month';
+    readonly nextPage: 'Next page';
+    readonly noCommands: 'No matching commands';
+    readonly noData: 'No data';
+    readonly noResults: 'No results';
+    readonly notifications: 'Notifications';
+    readonly pagination: 'Pagination';
+    readonly previousMonth: 'Previous month';
+    readonly previousPage: 'Previous page';
+    readonly progress: 'Progress';
+    readonly rating: 'Rating';
+    readonly remove: 'Remove';
+    readonly removeEdge: 'Remove this edge';
+    readonly removeNamed: 'Remove {name}';
+    readonly removeValue: 'Remove this value';
+    readonly resizePanes: 'Resize the panes';
+    readonly retry: 'Try again';
+    readonly search: 'Search';
+    readonly selectOption: 'Please select one of these options.';
+    readonly shortcuts: 'Shortcuts';
+    readonly showMore: 'Show more';
+    readonly showMoreCount: 'Show {count} more';
+    readonly shownOfTotal: '{shown} of {total}';
+    readonly showOptions: 'Show the options';
+    readonly showPassword: 'Show the password';
+    readonly stay: 'Keep editing';
+    readonly stepCurrent: ', current step';
+    readonly stepDone: ', completed';
+    readonly tidyLayout: 'Tidy up the layout';
+    readonly zoomIn: 'Zoom in';
+    readonly zoomOut: 'Zoom out';
+};
+/**
+ * Gives jlib's components their texts in the page's language, before they are drawn: once at start, as a page
+ * reads its own messages. A text left out stays English.
+ */
+export declare function setTexts(texts: JlTexts): void;
+/** One of jlib's texts, in the language the page set, its `{placeholders}` filled. */
+export declare const jlText: (key: JlTextKey, values?: Readonly<Record<string, string>>) => string;

package/dist/lib/texts.js

@@ -0,0 +1,102 @@
+import { fillText } from "./text.js";
+// src/lib/texts.ts
+/**
+* Every text jlib's components show or say on their own, in English: labels for screen readers, buttons, states,
+* the defaults of their text inputs. `{placeholders}` are filled when the text is shown.
+*/
+var DEFAULT_TEXTS = {
+	addTag: "Add at least one tag.",
+	addValue: "Add a value",
+	back: "Back",
+	breadcrumb: "Breadcrumb",
+	browse: "Browse",
+	chooseDate: "Choose a date",
+	chooseDateMissing: "Choose a date.",
+	chooseFile: "Choose a file.",
+	chooseOption: "Choose an option.",
+	chooseRating: "Choose a rating.",
+	chosenFiles: "Chosen files",
+	clear: "Clear",
+	clearSearch: "Clear the search",
+	close: "Close",
+	closeMenu: "Close the menu",
+	collapseMenu: "Collapse the menu",
+	commandPalette: "Command palette",
+	commandPlaceholder: "Type a command or search…",
+	commands: "Commands",
+	copied: "Copied",
+	copy: "Copy",
+	decrease: "Decrease",
+	dismiss: "Dismiss",
+	downloadCancel: "Cancel",
+	downloadFailed: "Not downloaded: {error}",
+	downloadPreparing: "Preparing the file… {time}",
+	downloadReceived: "{received} received",
+	downloadReceivedOf: "{received} of {total}",
+	downloadSaved: "Saved as {name}, {size}",
+	dragToConnect: "Drag to another node to connect",
+	dropFile: "Drop a file here",
+	dropFiles: "Drop files here",
+	expandMenu: "Expand the menu",
+	failedStep: ", failed",
+	fileTooLarge: "is larger than {size}",
+	fileTooMany: "is one too many: the field takes a single file",
+	fileUpTo: "up to {size}",
+	fileWrongType: "is not an accepted type ({types})",
+	fillField: "Please fill in this field.",
+	fitView: "Show every node",
+	flow: "Flow",
+	hidePassword: "Hide the password",
+	increase: "Increase",
+	leave: "Leave",
+	leaveText: "Your changes are lost.",
+	loadError: "This could not be loaded.",
+	loading: "Loading",
+	loadingMore: "Loading…",
+	loadStateError: "Check the connection, then try again. Nothing was changed.",
+	mainNavigation: "Main",
+	menu: "Menu",
+	navigation: "Navigation",
+	nextMonth: "Next month",
+	nextPage: "Next page",
+	noCommands: "No matching commands",
+	noData: "No data",
+	noResults: "No results",
+	notifications: "Notifications",
+	pagination: "Pagination",
+	previousMonth: "Previous month",
+	previousPage: "Previous page",
+	progress: "Progress",
+	rating: "Rating",
+	remove: "Remove",
+	removeEdge: "Remove this edge",
+	removeNamed: "Remove {name}",
+	removeValue: "Remove this value",
+	resizePanes: "Resize the panes",
+	retry: "Try again",
+	search: "Search",
+	selectOption: "Please select one of these options.",
+	shortcuts: "Shortcuts",
+	showMore: "Show more",
+	showMoreCount: "Show {count} more",
+	shownOfTotal: "{shown} of {total}",
+	showOptions: "Show the options",
+	showPassword: "Show the password",
+	stay: "Keep editing",
+	stepCurrent: ", current step",
+	stepDone: ", completed",
+	tidyLayout: "Tidy up the layout",
+	zoomIn: "Zoom in",
+	zoomOut: "Zoom out"
+};
+var current = { ...DEFAULT_TEXTS };
+/**
+* Gives jlib's components their texts in the page's language, before they are drawn: once at start, as a page
+* reads its own messages. A text left out stays English.
+*/
+function setTexts(texts) {
+	Object.assign(current, texts);
+}
+/** One of jlib's texts, in the language the page set, its `{placeholders}` filled. */
+var jlText = (key, values = {}) => fillText(current[key], values);
+export { DEFAULT_TEXTS, jlText, setTexts };

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/molecules/jl-account-button.js

@@ -35,7 +35,7 @@ var JlAccountButton = class extends JlElement {
 	/** 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"),

package/dist/molecules/jl-alert.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 { TONES, TONE_ICONS, TONE_ICON_FILLED } from "../lib/options.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";
@@ -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,6 +3,7 @@ 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 { 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";
@@ -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,6 +3,7 @@ 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 { 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";
@@ -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"),