@syware/jlib 0.6.0 → 0.7.0

package/dist/all.js

@@ -8,9 +8,11 @@ import { PLACEMENTS, computePosition, followAnchor, placeFloating } from "./lib/
 import { COMMON_ICONS } from "./lib/icon-set.js";
 import { hasIcon, iconElement, iconNames, registerIcons } from "./lib/icons.js";
 import { CONTROL_SIZES, TONES, TONE_ICONS, TONE_ICON_FILLED } from "./lib/options.js";
+import { cellOf } from "./lib/table.js";
 import { formatDuration, formatRelativeTime } from "./lib/time.js";
+import { DEFAULT_TEXTS, jlText, setTexts } from "./lib/texts.js";
 import { JlIcon } from "./atoms/jl-icon.js";
-import { JlAppIcon } from "./atoms/jl-app-icon.js";
+import { JlAppIcon, setFavicon } from "./atoms/jl-app-icon.js";
 import { AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, JlAvatar } from "./atoms/jl-avatar.js";
 import { JlBadge } from "./atoms/jl-badge.js";
 import { JlSpinner } from "./atoms/jl-spinner.js";
@@ -43,9 +45,12 @@ import { CODE_LANGUAGES, JlCodeBlock } from "./molecules/jl-code-block.js";
 import { JlCombobox } from "./molecules/jl-combobox.js";
 import { JlDatePicker } from "./molecules/jl-date-picker.js";
 import { EMPTY_SIZES, JlEmpty } from "./molecules/jl-empty.js";
+import { FACTS_ORIENTATIONS, JlFacts } from "./molecules/jl-facts.js";
 import { FIELD_ORIENTATIONS, JlField } from "./molecules/jl-field.js";
 import { JlFileDrop } from "./molecules/jl-file-drop.js";
+import { JlInputList } from "./molecules/jl-input-list.js";
 import { JlListItem } from "./molecules/jl-list-item.js";
+import { JlLoadMore } from "./molecules/jl-load-more.js";
 import { JlLoadState, LOAD_SKELETONS, LOAD_STATES } from "./molecules/jl-load-state.js";
 import { JlMenu } from "./molecules/jl-menu.js";
 import { JlNumberInput } from "./molecules/jl-number-input.js";
@@ -73,7 +78,7 @@ import { JlPageHeader } from "./organisms/jl-page-header.js";
 import { JlSideNav } from "./organisms/jl-side-nav.js";
 import { JlTabBar } from "./organisms/jl-tab-bar.js";
 import { JlTable, TABLE_SORT_DIRECTIONS } from "./organisms/jl-table.js";
-import { JlToaster, TOASTER_PLACEMENTS, toast } from "./organisms/jl-toaster.js";
+import { JlToaster, TOASTER_PLACEMENTS, download, downloadTexts, toast } from "./organisms/jl-toaster.js";
 import { JlTree } from "./organisms/jl-tree.js";
 import { JlAppShell } from "./templates/jl-app-shell.js";
 import { JlAuthLayout } from "./templates/jl-auth-layout.js";
@@ -81,5 +86,5 @@ import { JlPage, PAGE_WIDTHS } from "./templates/jl-page.js";
 import { JlSplitView, SPLIT_ORIENTATIONS, SPLIT_PANES } from "./templates/jl-split-view.js";
 // src/all.ts
 registerIcons(COMMON_ICONS);
-define(JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppIcon, JlAppShell, JlAuthLayout, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlEmpty, JlField, JlFileDrop, JlFlow, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlLoadState, JlMenu, JlNavbar, JlNumberInput, JlPage, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSearchButton, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTable, JlTabPanel, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree);
-export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppIcon, JlAppShell, JlAuthLayout, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlLoadState, JlMenu, JlNavbar, JlNumberInput, JlPage, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSearchButton, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, LOAD_SKELETONS, LOAD_STATES, PAGE_WIDTHS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, SPLIT_PANES, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, formatDuration, formatRelativeTime, guardLeave, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };
+define(JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppIcon, JlAppShell, JlAuthLayout, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlEmpty, JlFacts, JlField, JlFileDrop, JlFlow, JlIcon, JlInput, JlInputList, JlKbd, JlLink, JlListItem, JlLoadMore, JlLoadState, JlMenu, JlNavbar, JlNumberInput, JlPage, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSearchButton, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTable, JlTabPanel, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree);
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DEFAULT_TEXTS, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FACTS_ORIENTATIONS, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppIcon, JlAppShell, JlAuthLayout, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlFacts, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlInputList, JlKbd, JlLink, JlListItem, JlLoadMore, JlLoadState, JlMenu, JlNavbar, JlNumberInput, JlPage, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSearchButton, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, LOAD_SKELETONS, LOAD_STATES, PAGE_WIDTHS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, SPLIT_PANES, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, cellOf, clampedNumber, computePosition, confirmDialog, define, download, downloadTexts, followAnchor, formatDuration, formatRelativeTime, guardLeave, hasIcon, iconElement, iconNames, jlText, jsonOf, oneOf, placeFloating, registerIcons, setFavicon, setTexts, toast };

package/dist/atoms/jl-app-icon.d.ts

@@ -1,4 +1,9 @@
 import { JlElement } from '../base/jl-element';
+/**
+ * Makes an app's icon the page's favicon: the tile `jl-app-icon` draws, its glyph a registered icon name, in the
+ * theme's `--jl-brand` and `--jl-on-brand` as the document has them, so a page's own theme shows in the tab too.
+ */
+export declare function setFavicon(icon: string): void;
 /**
  * An app's icon: its glyph in white on a rounded tile of the brand's blue, one family for every SyWare app. Beside
  * the wordmark at the top of the side nav, alone in a folded rail or a phone's top bar; the favicon and the home

package/dist/atoms/jl-app-icon.js

@@ -1,6 +1,9 @@
 import { BASE_STYLES } from "../styles/shared.js";
+import { adoptTokens } from "../lib/tokens.js";
 import { JlElement } from "../base/jl-element.js";
 import { clampedNumber } from "../lib/attributes.js";
+import { iconNode } from "../lib/icons.js";
+import { CORNER_SHARE, GLYPH_SHARE, appIconSvg } from "../lib/app-icon.js";
 import jl_app_icon_default from "./jl-app-icon.css_raw.js";
 import { JlIcon } from "./jl-icon.js";
 import { css } from "@jadis/core";
@@ -9,8 +12,27 @@ import { jsx } from "@jadis/core/jsx-runtime";
 var DEFAULT_SIZE = 28;
 var MIN_SIZE = 12;
 var MAX_SIZE = 512;
-var GLYPH_SHARE = .62;
-var CORNER_SHARE = .26;
+var TILE_TOKEN = "--jl-brand";
+var GLYPH_TOKEN = "--jl-on-brand";
+var FAVICON_SELECTOR = "link[rel=\"icon\"]";
+var FAVICON_REL = "icon";
+var SVG_TYPE = "image/svg+xml";
+/**
+* Makes an app's icon the page's favicon: the tile `jl-app-icon` draws, its glyph a registered icon name, in the
+* theme's `--jl-brand` and `--jl-on-brand` as the document has them, so a page's own theme shows in the tab too.
+*/
+function setFavicon(icon) {
+	adoptTokens();
+	const style = getComputedStyle(document.documentElement);
+	const svg = appIconSvg(iconNode(icon), {
+		glyph: style.getPropertyValue(GLYPH_TOKEN).trim(),
+		tile: style.getPropertyValue(TILE_TOKEN).trim()
+	});
+	const link = document.head.querySelector(FAVICON_SELECTOR) ?? document.head.appendChild(document.createElement("link"));
+	link.rel = FAVICON_REL;
+	link.type = SVG_TYPE;
+	link.href = `data:${SVG_TYPE},${encodeURIComponent(svg)}`;
+}
 /**
 * An app's icon: its glyph in white on a rounded tile of the brand's blue, one family for every SyWare app. Beside
 * the wordmark at the top of the side nav, alone in a folded rail or a phone's top bar; the favicon and the home
@@ -28,7 +50,7 @@ var JlAppIcon = class extends JlElement {
 	/** The app's name, for screen readers when no wordmark beside it says it. */
 	label = this.useChange("", (value) => this.renderLabel(value), { attribute: "label" });
 	_refs = this.useRefs((ref) => ({
-		glyph: ref("jl-icon"),
+		glyph: ref(JlIcon),
 		tile: ref(".tile")
 	}));
 	templateHtml() {
@@ -61,4 +83,4 @@ var JlAppIcon = class extends JlElement {
 	}
 };
 JlAppIcon.register();
-export { JlAppIcon };
+export { JlAppIcon, setFavicon };

package/dist/atoms/jl-badge.js

@@ -31,7 +31,7 @@ var JlBadge = class extends JlElement {
 	_refs = this.useRefs((ref) => ({
 		badge: ref(".badge"),
 		dot: ref(".dot"),
-		icon: ref("jl-icon"),
+		icon: ref(JlIcon),
 		label: ref(".label")
 	}));
 	/** Shows a state as an app's map of states describes it: its label, tone, icon and hint. */

package/dist/atoms/jl-button.d.ts

@@ -67,6 +67,11 @@ export declare class JlButton extends JlElement {
         get(): string;
         set(setter: string | ((prevState: string) => string)): void;
     }>>;
+    /** With an `href`, saves what it points to as a file of this name instead of opening it. */
+    readonly download: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
     private readonly _internals;
     private readonly _refs;
     focus(options?: FocusOptions): void;

package/dist/atoms/jl-button.js

@@ -73,6 +73,8 @@ var JlButton = class extends JlElement {
 	href = this.useChange("", () => this.renderLink(), { attribute: "href" });
 	/** Where the link opens (`_blank` for a new tab), with an `href`. */
 	target = this.useChange("", () => this.renderLink(), { attribute: "target" });
+	/** With an `href`, saves what it points to as a file of this name instead of opening it. */
+	download = this.useChange("", () => this.renderLink(), { attribute: "download" });
 	_internals = this.attachInternals();
 	_refs = this.useRefs((ref) => ({
 		button: ref("button"),
@@ -81,7 +83,7 @@ var JlButton = class extends JlElement {
 		label: ref(".text"),
 		link: ref("a"),
 		slot: ref("slot"),
-		spinner: ref("jl-spinner"),
+		spinner: ref(JlSpinner),
 		start: ref(".start")
 	}));
 	focus(options) {
@@ -154,6 +156,7 @@ var JlButton = class extends JlElement {
 		link.hidden = !isLink;
 		setOrRemove(link, "href", isLink && !off ? href : "");
 		setOrRemove(link, "target", target);
+		setOrRemove(link, "download", this.download.get());
 		setOrRemove(link, "rel", target === NEW_TAB ? SAFE_REL : "");
 		setOrRemove(link, "role", off ? "link" : "");
 		setOrRemove(link, "aria-disabled", off ? "true" : "");

package/dist/atoms/jl-chip.js

@@ -2,6 +2,7 @@ import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "./jl-icon.js";
 import { isActivationKey } from "../lib/surface.js";
 import jl_chip_default from "./jl-chip.css_raw.js";
@@ -91,7 +92,7 @@ var JlChip = class extends JlElement {
 			}), /* @__PURE__ */ jsx("button", {
 				class: "dismiss",
 				type: "button",
-				"aria-label": "Remove",
+				"aria-label": jlText("remove"),
 				hidden: true,
 				children: /* @__PURE__ */ jsx(JlIcon, { name: "x" })
 			})]
@@ -152,7 +153,7 @@ var JlChip = class extends JlElement {
 	renderLabel() {
 		const label = this.label.get();
 		this._refs.label.textContent = label;
-		this._refs.dismiss.setAttribute("aria-label", label === "" ? "Remove" : `Remove ${label}`);
+		this._refs.dismiss.setAttribute("aria-label", label === "" ? jlText("remove") : jlText("removeNamed", { name: label }));
 	}
 	renderSize(size) {
 		this.reflect("size", size);

package/dist/atoms/jl-input.js

@@ -3,6 +3,7 @@ import { JlFormControl } from "../base/jl-form-control.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 { JlIcon } from "./jl-icon.js";
 import { setOrRemove } from "../lib/dom.js";
 import jl_input_default from "./jl-input.css_raw.js";
@@ -107,7 +108,7 @@ var JlInput = 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, {
@@ -118,7 +119,7 @@ var JlInput = class extends JlFormControl {
 				/* @__PURE__ */ jsx("button", {
 					class: "action reveal",
 					type: "button",
-					"aria-label": "Show the password",
+					"aria-label": jlText("showPassword"),
 					hidden: true,
 					children: /* @__PURE__ */ jsx(JlIcon, {
 						name: "eye",
@@ -163,7 +164,7 @@ var JlInput = class extends JlFormControl {
 		const revealed = native.type === PASSWORD;
 		native.type = revealed ? REVEALED : PASSWORD;
 		this._refs.revealIcon.name.set(revealed ? "eye-off" : "eye");
-		this._refs.reveal.setAttribute("aria-label", revealed ? "Hide the password" : "Show the password");
+		this._refs.reveal.setAttribute("aria-label", revealed ? jlText("hidePassword") : jlText("showPassword"));
 	}
 	renderValue(value) {
 		const native = this._refs.native;

package/dist/atoms/jl-link.js

@@ -39,7 +39,7 @@ var JlLink = class extends JlElement {
 	});
 	_refs = this.useRefs((ref) => ({
 		anchor: ref("a"),
-		icon: ref("jl-icon"),
+		icon: ref(JlIcon),
 		label: ref(".label"),
 		newTab: ref(".new-tab")
 	}));

package/dist/atoms/jl-rating.js

@@ -3,6 +3,7 @@ import { JlFormControl } from "../base/jl-form-control.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { iconElement, registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
+import { jlText } from "../lib/texts.js";
 import { ratingAfterChoice, ratingAfterKey } from "../lib/rating.js";
 import jl_rating_default from "./jl-rating.css_raw.js";
 import { css } from "@jadis/core";
@@ -18,8 +19,6 @@ var ICON_SIZES = {
 var DEFAULT_MAX = 5;
 var MAX_LIMIT = 10;
 var NO_PREVIEW = 0;
-var DEFAULT_LABEL = "Rating";
-var VALUE_MISSING = "Choose a rating.";
 /**
 * A row of stars (or hearts, or any icon) to give a score: a click, the arrows or a digit set it, and choosing the
 * score already given clears it. Hovering previews the score a click would give.
@@ -50,8 +49,8 @@ var JlRating = class extends JlFormControl {
 		parse: oneOf(CONTROL_SIZES, "md")
 	});
 	/** The name screen readers give the scale. */
-	label = this.useChange(DEFAULT_LABEL, (value) => {
-		this._refs.slider.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value);
+	label = this.useChange(jlText("rating"), (value) => {
+		this._refs.slider.setAttribute("aria-label", value === "" ? jlText("rating") : value);
 	}, { attribute: "label" });
 	required = this.useChange(false, (value) => {
 		this._refs.slider.toggleAttribute("aria-required", value);
@@ -167,7 +166,7 @@ var JlRating = class extends JlFormControl {
 	}
 	renderValidity() {
 		if (this.required.get() && this.current() === 0) {
-			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.slider);
+			this.internals.setValidity({ valueMissing: true }, jlText("chooseRating"), this._refs.slider);
 			return;
 		}
 		this.internals.setValidity({});

package/dist/atoms/jl-select.css_raw.js

@@ -1,3 +1,3 @@
 // src/atoms/jl-select.css?raw
-var jl_select_default = ":host {\n  display: block;\n}\n\n/* The select covers the whole frame, chevron included, so a click anywhere opens it. */\n.control {\n  position: relative;\n  padding: 0;\n}\n\n.native {\n  padding: 0 36px 0 12px;\n  border-radius: inherit;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  appearance: none;\n}\n\n.native:disabled {\n  cursor: not-allowed;\n}\n\n:host([placeholder-shown]) .native {\n  color: var(--jl-faint);\n}\n\n/* The list keeps the text colour even while the placeholder greys the closed field. */\noption,\noptgroup {\n  background: var(--jl-surface);\n  color: var(--jl-text);\n}\n\n.chevron {\n  position: absolute;\n  right: 12px;\n  color: var(--jl-muted);\n  pointer-events: none;\n}\n\n:host([disabled]) .chevron {\n  color: var(--jl-faint);\n}\n";
+var jl_select_default = ":host {\n  display: block;\n}\n\n/* The select covers the whole frame, chevron included, so a click anywhere opens it. */\n.control {\n  position: relative;\n  padding: 0;\n}\n\n.native {\n  padding: 0 36px 0 12px;\n  border-radius: inherit;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  appearance: none;\n}\n\n.native:disabled {\n  cursor: not-allowed;\n}\n\n:host([placeholder-shown]) .native {\n  color: var(--jl-faint);\n}\n\n/* The list keeps the text colour even while the placeholder greys the closed field. */\noption,\noptgroup {\n  background: var(--jl-surface);\n  color: var(--jl-text);\n}\n\n.chevron {\n  position: absolute;\n  right: 12px;\n  color: var(--jl-muted);\n  pointer-events: none;\n  transition: transform var(--jl-fast) var(--jl-ease);\n}\n\n.native:open + .chevron {\n  transform: rotate(180deg);\n}\n\n:host([disabled]) .chevron {\n  color: var(--jl-faint);\n}\n\n/*\n * Where the browser lets the page draw the list (customizable select), it is the combobox's: the same panel, rows\n * and check. Touch screens keep the platform's own sheet, and other browsers their own list.\n */\n@media (hover: hover) and (pointer: fine) {\n  @supports (appearance: base-select) {\n    /* The list lines up with the frame, not with the select inside its border. */\n    .control {\n      anchor-name: --frame;\n    }\n\n    .native,\n    .native::picker(select) {\n      appearance: base-select;\n    }\n\n    /*\n     * The browser draws the chosen label in a box of its own, out of text-overflow's reach: clamped to one line and\n     * clipped at the padding, it still ends with an ellipsis.\n     */\n    .native {\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n      padding-block: calc((var(--height, var(--jl-control-md)) - 2px - 1lh) / 2);\n      overflow: clip;\n      overflow-clip-margin: content-box;\n    }\n\n    .native::picker-icon {\n      display: none;\n    }\n\n    .native::picker(select) {\n      position-anchor: --frame;\n      /* Under the field when it fits there, as the combobox's list. */\n      position-try-order: normal;\n      box-sizing: border-box;\n      min-inline-size: anchor-size(self-inline);\n      max-block-size: 274px;\n      margin-block: 6px;\n      padding: 4px;\n      border: 1px solid var(--jl-line);\n      border-radius: var(--jl-radius);\n      background: var(--jl-surface);\n      color: var(--jl-text);\n      box-shadow: var(--jl-shadow-lg);\n      animation: jl-float-in var(--jl-fast) var(--jl-ease);\n    }\n\n    /*\n     * A heading as the command palette's. The browser draws the label itself, half an em in: text-indent reaches it\n     * and lines it up with the options' text.\n     */\n    optgroup {\n      padding-block-start: 8px;\n      color: var(--jl-muted);\n      font-size: var(--jl-font-xs);\n      font-weight: 600;\n      text-indent: calc(10px - 0.5em);\n    }\n\n    optgroup > option:first-of-type {\n      margin-block-start: 4px;\n    }\n\n    option {\n      box-sizing: border-box;\n      gap: 10px;\n      min-block-size: 34px;\n      padding: 6px 10px;\n      border-radius: var(--jl-radius-xs);\n      font-size: var(--jl-font-md);\n      font-weight: 400;\n      line-height: 1.35;\n      text-indent: 0;\n      cursor: pointer;\n    }\n\n    option:enabled:is(:hover, :focus-visible) {\n      background: var(--jl-surface-3);\n      box-shadow: none;\n    }\n\n    option:checked {\n      font-weight: 600;\n    }\n\n    option:disabled {\n      color: var(--jl-faint);\n      cursor: not-allowed;\n    }\n\n    /* Lucide's check, at the end of the row as in the combobox. */\n    option::checkmark {\n      order: 1;\n      width: 14px;\n      height: 14px;\n      margin-inline-start: auto;\n      background: var(--jl-accent);\n      content: \"\";\n      mask:\n        url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\")\n        center / contain no-repeat;\n    }\n  }\n}\n";
 export { jl_select_default as default };

package/dist/atoms/jl-select.d.ts

@@ -2,8 +2,9 @@ import { JlFormControl } from '../base/jl-form-control';
 import type { SelectOption } from '../types/jl-select.types';
 import type { ControlSize } from '../types/options.types';
 /**
- * A choice among a list, on the browser's own `<select>`: its list opens the way the platform does it. The choices
- * come from `options` (JSON) or from `<option>` and `<optgroup>` elements written inside it.
+ * A choice among a list, on the browser's own `<select>`: its list opens the way the platform does it on a touch
+ * screen, and with a mouse looks like the combobox's where the browser lets the page draw it (customizable select).
+ * The choices come from `options` (JSON) or from `<option>` and `<optgroup>` elements written inside it.
  */
 export declare class JlSelect extends JlFormControl {
     static readonly selector = "jl-select";

package/dist/atoms/jl-select.js

@@ -1,4 +1,4 @@
-import { BASE_STYLES, CONTROL_STYLES } from "../styles/shared.js";
+import { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES } from "../styles/shared.js";
 import { JlFormControl } from "../base/jl-form-control.js";
 import { jsonOf, oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
@@ -29,8 +29,9 @@ var groupNodes = (group) => {
 	})];
 };
 /**
-* A choice among a list, on the browser's own `<select>`: its list opens the way the platform does it. The choices
-* come from `options` (JSON) or from `<option>` and `<optgroup>` elements written inside it.
+* A choice among a list, on the browser's own `<select>`: its list opens the way the platform does it on a touch
+* screen, and with a mouse looks like the combobox's where the browser lets the page draw it (customizable select).
+* The choices come from `options` (JSON) or from `<option>` and `<optgroup>` elements written inside it.
 */
 var JlSelect = class extends JlFormControl {
 	static selector = "jl-select";
@@ -81,7 +82,7 @@ var JlSelect = class extends JlFormControl {
 		});
 	}
 	templateCss() {
-		return css`${BASE_STYLES}${CONTROL_STYLES}${jl_select_default}`;
+		return css`${BASE_STYLES}${CONTROL_STYLES}${FLOATING_STYLES}${jl_select_default}`;
 	}
 	onConnect() {
 		const native = this._refs.native;

package/dist/atoms/jl-spinner.js

@@ -1,16 +1,16 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
+import { jlText } from "../lib/texts.js";
 import jl_spinner_default from "./jl-spinner.css_raw.js";
 import { css } from "@jadis/core";
 import { jsx } from "@jadis/core/jsx-runtime";
 // src/atoms/jl-spinner.tsx
 var DEFAULT_SIZE = 16;
-var DEFAULT_LABEL = "Loading";
 /** A turning ring for work in progress. It follows the text colour; `label` is what screen readers say. */
 var JlSpinner = class extends JlElement {
 	static selector = "jl-spinner";
 	size = this.useChange(DEFAULT_SIZE, (value) => this.style.setProperty("--size", `${value}px`), { attribute: "size" });
-	label = this.useChange(DEFAULT_LABEL, (value) => this._refs.ring.setAttribute("aria-label", value), { attribute: "label" });
+	label = this.useChange(jlText("loading"), (value) => this._refs.ring.setAttribute("aria-label", value), { attribute: "label" });
 	_refs = this.useRefs((ref) => ({ ring: ref(".ring") }));
 	templateHtml() {
 		return /* @__PURE__ */ jsx("span", {

package/dist/base/jl-form-control.js

@@ -1,4 +1,5 @@
 import { JlElement } from "./jl-element.js";
+import { formInternals } from "../lib/internals.js";
 // src/base/jl-form-control.ts
 /**
 * The base of the components a form submits: they take part in `<form>` like native fields (their `name`, their
@@ -6,7 +7,7 @@ import { JlElement } from "./jl-element.js";
 */
 var JlFormControl = class extends JlElement {
 	static formAssociated = true;
-	internals = this.attachInternals();
+	internals = formInternals(this);
 	/** The field's name in the form's data. Reflected, so a name set from JSX reaches the form too. */
 	name = this.useChange("", (value) => this.reflect("name", value), { attribute: "name" });
 	get form() {

package/dist/index.d.ts

@@ -6,7 +6,9 @@ export { computePosition, followAnchor, PLACEMENTS, placeFloating } from './lib/
 export { COMMON_ICONS } from './lib/icon-set';
 export { hasIcon, iconElement, iconNames, registerIcons } from './lib/icons';
 export { CONTROL_SIZES, TONE_ICON_FILLED, TONE_ICONS, TONES } from './lib/options';
+export { cellOf } from './lib/table';
 export { formatDuration, formatRelativeTime } from './lib/time';
+export { DEFAULT_TEXTS, jlText, setTexts } from './lib/texts';
 export { adoptTokens } from './lib/tokens';
 export { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES, TOKEN_STYLES } from './styles/shared';
 export type * from './types/calendar.types';
@@ -16,6 +18,7 @@ export type * from './types/fuzzy.types';
 export type * from './types/highlight.types';
 export type * from './types/hotkey.types';
 export type * from './types/jl-accordion.types';
+export type * from './types/jl-app-icon.types';
 export type * from './types/jl-avatar.types';
 export type * from './types/jl-badge.types';
 export type * from './types/jl-breadcrumb.types';
@@ -30,6 +33,7 @@ export type * from './types/jl-dialog.types';
 export type * from './types/jl-divider.types';
 export type * from './types/jl-drawer.types';
 export type * from './types/jl-empty.types';
+export type * from './types/jl-facts.types';
 export type * from './types/jl-field.types';
 export type * from './types/jl-flow.types';
 export type * from './types/jl-input.types';
@@ -63,6 +67,7 @@ export type * from './types/options.types';
 export type * from './types/pagination.types';
 export type * from './types/roving-index.types';
 export type * from './types/sparkline.types';
+export type * from './types/texts.types';
 export * from './atoms/jl-app-icon';
 export * from './atoms/jl-avatar';
 export * from './atoms/jl-badge';
@@ -97,9 +102,12 @@ export * from './molecules/jl-combobox';
 export * from './molecules/jl-copy-button';
 export * from './molecules/jl-date-picker';
 export * from './molecules/jl-empty';
+export * from './molecules/jl-facts';
 export * from './molecules/jl-field';
 export * from './molecules/jl-file-drop';
+export * from './molecules/jl-input-list';
 export * from './molecules/jl-list-item';
+export * from './molecules/jl-load-more';
 export * from './molecules/jl-load-state';
 export * from './molecules/jl-menu';
 export * from './molecules/jl-number-input';

package/dist/index.js

@@ -8,9 +8,11 @@ import { PLACEMENTS, computePosition, followAnchor, placeFloating } from "./lib/
 import { COMMON_ICONS } from "./lib/icon-set.js";
 import { hasIcon, iconElement, iconNames, registerIcons } from "./lib/icons.js";
 import { CONTROL_SIZES, TONES, TONE_ICONS, TONE_ICON_FILLED } from "./lib/options.js";
+import { cellOf } from "./lib/table.js";
 import { formatDuration, formatRelativeTime } from "./lib/time.js";
+import { DEFAULT_TEXTS, jlText, setTexts } from "./lib/texts.js";
 import { JlIcon } from "./atoms/jl-icon.js";
-import { JlAppIcon } from "./atoms/jl-app-icon.js";
+import { JlAppIcon, setFavicon } from "./atoms/jl-app-icon.js";
 import { AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, JlAvatar } from "./atoms/jl-avatar.js";
 import { JlBadge } from "./atoms/jl-badge.js";
 import { JlSpinner } from "./atoms/jl-spinner.js";
@@ -43,9 +45,12 @@ import { CODE_LANGUAGES, JlCodeBlock } from "./molecules/jl-code-block.js";
 import { JlCombobox } from "./molecules/jl-combobox.js";
 import { JlDatePicker } from "./molecules/jl-date-picker.js";
 import { EMPTY_SIZES, JlEmpty } from "./molecules/jl-empty.js";
+import { FACTS_ORIENTATIONS, JlFacts } from "./molecules/jl-facts.js";
 import { FIELD_ORIENTATIONS, JlField } from "./molecules/jl-field.js";
 import { JlFileDrop } from "./molecules/jl-file-drop.js";
+import { JlInputList } from "./molecules/jl-input-list.js";
 import { JlListItem } from "./molecules/jl-list-item.js";
+import { JlLoadMore } from "./molecules/jl-load-more.js";
 import { JlLoadState, LOAD_SKELETONS, LOAD_STATES } from "./molecules/jl-load-state.js";
 import { JlMenu } from "./molecules/jl-menu.js";
 import { JlNumberInput } from "./molecules/jl-number-input.js";
@@ -73,10 +78,10 @@ import { JlPageHeader } from "./organisms/jl-page-header.js";
 import { JlSideNav } from "./organisms/jl-side-nav.js";
 import { JlTabBar } from "./organisms/jl-tab-bar.js";
 import { JlTable, TABLE_SORT_DIRECTIONS } from "./organisms/jl-table.js";
-import { JlToaster, TOASTER_PLACEMENTS, toast } from "./organisms/jl-toaster.js";
+import { JlToaster, TOASTER_PLACEMENTS, download, downloadTexts, toast } from "./organisms/jl-toaster.js";
 import { JlTree } from "./organisms/jl-tree.js";
 import { JlAppShell } from "./templates/jl-app-shell.js";
 import { JlAuthLayout } from "./templates/jl-auth-layout.js";
 import { JlPage, PAGE_WIDTHS } from "./templates/jl-page.js";
 import { JlSplitView, SPLIT_ORIENTATIONS, SPLIT_PANES } from "./templates/jl-split-view.js";
-export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppIcon, JlAppShell, JlAuthLayout, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlKbd, JlLink, JlListItem, JlLoadState, JlMenu, JlNavbar, JlNumberInput, JlPage, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSearchButton, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, LOAD_SKELETONS, LOAD_STATES, PAGE_WIDTHS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, SPLIT_PANES, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, clampedNumber, computePosition, confirmDialog, define, followAnchor, formatDuration, formatRelativeTime, guardLeave, hasIcon, iconElement, iconNames, jsonOf, oneOf, placeFloating, registerIcons, toast };
+export { ACCORDION_VARIANTS, AVATAR_SHAPES, AVATAR_SIZES, AVATAR_STATUSES, BASE_STYLES, BUTTON_TYPES, BUTTON_VARIANTS, CARD_PADDINGS, CHIP_SIZES, CODE_LANGUAGES, COMMON_ICONS, CONFIRM_TONES, CONTROL_SIZES, CONTROL_STYLES, DEFAULT_TEXTS, DIALOG_SIZES, DIVIDER_ALIGNS, DRAWER_PLACEMENTS, DRAWER_SIZES, EMPTY_SIZES, FACTS_ORIENTATIONS, FIELD_ORIENTATIONS, FLOATING_STYLES, INPUT_TYPES, JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppIcon, JlAppShell, JlAuthLayout, JlAvatar, JlAvatarGroup, JlBadge, JlBreadcrumb, JlButton, JlCalendar, JlCard, JlCheckbox, JlChip, JlChipGroup, JlCodeBlock, JlCombobox, JlCommandPalette, JlConfirm, JlCopyButton, JlDatePicker, JlDialog, JlDivider, JlDrawer, JlElement, JlEmpty, JlFacts, JlField, JlFileDrop, JlFlow, JlFormControl, JlIcon, JlInput, JlInputList, JlKbd, JlLink, JlListItem, JlLoadMore, JlLoadState, JlMenu, JlNavbar, JlNumberInput, JlPage, JlPageHeader, JlPagination, JlPopover, JlProgress, JlProgressRing, JlRadioGroup, JlRating, JlSearch, JlSearchButton, JlSegmented, JlSelect, JlSideNav, JlSkeleton, JlSlider, JlSpinner, JlSplitView, JlStat, JlSteps, JlSwitch, JlTabBar, JlTabPanel, JlTable, JlTabs, JlTagInput, JlTextarea, JlTimeline, JlToast, JlToaster, JlTooltip, JlTree, LINK_VARIANTS, LOAD_SKELETONS, LOAD_STATES, PAGE_WIDTHS, PLACEMENTS, PROGRESS_SIZES, PROGRESS_TONES, RADIO_GROUP_ORIENTATIONS, RADIO_GROUP_VARIANTS, SKELETON_SHAPES, SPLIT_ORIENTATIONS, SPLIT_PANES, STAT_TRENDS, STEPS_ORIENTATIONS, SWITCH_SIZES, TABLE_SORT_DIRECTIONS, TAB_VARIANTS, TOASTER_PLACEMENTS, TOAST_TONES, TOKEN_STYLES, TONES, TONE_ICONS, TONE_ICON_FILLED, adoptTokens, cellOf, clampedNumber, computePosition, confirmDialog, define, download, downloadTexts, followAnchor, formatDuration, formatRelativeTime, guardLeave, hasIcon, iconElement, iconNames, jlText, jsonOf, oneOf, placeFloating, registerIcons, setFavicon, setTexts, toast };

package/dist/lib/app-icon.d.ts

@@ -0,0 +1,8 @@
+import type { IconNode } from 'lucide';
+import type { AppIconColors } from '../types/jl-app-icon.types';
+/** The glyph's share of the tile's side, at every size. */
+export declare const GLYPH_SHARE = 0.62;
+/** The corner's share of the tile's side. */
+export declare const CORNER_SHARE = 0.26;
+/** An app's icon as the text of an SVG file: its glyph in `colors.glyph` on a rounded square of `colors.tile`. */
+export declare function appIconSvg(glyph: IconNode, colors: AppIconColors): string;

package/dist/lib/app-icon.js

@@ -0,0 +1,37 @@
+import { ICON_STROKE_WIDTH } from "./icons.js";
+// src/lib/app-icon.ts
+/** The glyph's share of the tile's side, at every size. */
+var GLYPH_SHARE = .62;
+/** The corner's share of the tile's side. */
+var CORNER_SHARE = .26;
+var FILE_SIDE = 64;
+var GLYPH_GRID = 24;
+var DECIMALS = 2;
+var ATTRIBUTE_ESCAPES = {
+	"\"": """,
+	"&": "&",
+	"<": "&lt;"
+};
+var NEEDS_ESCAPE = /["&<]/g;
+var round = (value) => Number(value.toFixed(DECIMALS));
+var escapeAttribute = (value) => String(value).replace(NEEDS_ESCAPE, (character) => ATTRIBUTE_ESCAPES[character] ?? character);
+var attributesOf = (attributes) => Object.entries(attributes).flatMap(([name, value]) => value === void 0 ? [] : [` ${name}="${escapeAttribute(value)}"`]).join("");
+/** An app's icon as the text of an SVG file: its glyph in `colors.glyph` on a rounded square of `colors.tile`. */
+function appIconSvg(glyph, colors) {
+	const glyphSide = FILE_SIDE * GLYPH_SHARE;
+	const offset = round(24.32 / 2);
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${FILE_SIDE} ${FILE_SIDE}"><rect${attributesOf({
+		fill: colors.tile,
+		height: FILE_SIDE,
+		rx: round(FILE_SIDE * CORNER_SHARE),
+		width: FILE_SIDE
+	})}/><g${attributesOf({
+		fill: "none",
+		stroke: colors.glyph,
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": ICON_STROKE_WIDTH,
+		transform: `translate(${offset} ${offset}) scale(${round(glyphSide / GLYPH_GRID)})`
+	})}>${glyph.map(([tag, attributes]) => `<${tag}${attributesOf(attributes)}/>`).join("")}</g></svg>`;
+}
+export { CORNER_SHARE, GLYPH_SHARE, appIconSvg };

package/dist/lib/dom.d.ts

@@ -4,3 +4,5 @@ export declare function setOrRemove(element: Element, name: string, value: strin
 export declare function uniqueId(prefix: string): string;
 /** An SVG element with its attributes: JSX makes HTML elements only. */
 export declare function svgElement<Tag extends keyof SVGElementTagNameMap>(tag: Tag, attributes: Record<string, string>): SVGElementTagNameMap[Tag];
+/** Whether a click asks the browser for something of its own: a new tab or window, a download. */
+export declare const isModifiedClick: (event: MouseEvent) => boolean;

package/dist/lib/dom.js

@@ -20,4 +20,6 @@ function svgElement(tag, attributes) {
 	for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, value);
 	return element;
 }
-export { setOrRemove, svgElement, uniqueId };
+/** Whether a click asks the browser for something of its own: a new tab or window, a download. */
+var isModifiedClick = (event) => event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || event.button !== 0;
+export { isModifiedClick, setOrRemove, svgElement, uniqueId };

package/dist/lib/download.d.ts

@@ -0,0 +1,10 @@
+/** The file name a Content-Disposition header gives (its UTF-8 form first), or none. */
+export declare function dispositionFileName(header: string | null): string | undefined;
+/** A file name for an address: its last path segment, or the fallback when it has none. */
+export declare function urlFileName(url: string, fallback: string): string;
+/** What a failed answer's body says: `{ error: { message } }`, `{ error: "…" }`, `{ message }`, or its status. */
+export declare function answerError(body: unknown, status: number): string;
+/** Reads an answer to its end, saying how many bytes came at most once per interval, and once more at the end. */
+export declare function readWithProgress(response: Response, onProgress: (received: number) => void, intervalMs: number, now?: () => number): Promise<Blob>;
+/** Hands a file to the browser, which saves it under that name. */
+export declare function saveBlob(blob: Blob, name: string): void;

package/dist/lib/download.js

@@ -0,0 +1,62 @@
+// src/lib/download.ts
+var FILE_NAME_UTF8 = /filename\*\s*=\s*(?:UTF-8|utf-8)''([^;]+)/;
+var FILE_NAME = /filename\s*=\s*"?([^";]+)"?/;
+var REVOKE_DELAY_MS = 1e3;
+var ADDRESS_BASE = "http://localhost/";
+/** The file name a Content-Disposition header gives (its UTF-8 form first), or none. */
+function dispositionFileName(header) {
+	const utf8 = FILE_NAME_UTF8.exec(header ?? "")?.[1];
+	if (utf8 !== void 0) return decodeURIComponent(utf8.trim());
+	return FILE_NAME.exec(header ?? "")?.[1]?.trim() || void 0;
+}
+/** A file name for an address: its last path segment, or the fallback when it has none. */
+function urlFileName(url, fallback) {
+	const segment = new URL(url, ADDRESS_BASE).pathname.split("/").at(-1) ?? "";
+	return segment === "" ? fallback : decodeURIComponent(segment);
+}
+/** What a failed answer's body says: `{ error: { message } }`, `{ error: "…" }`, `{ message }`, or its status. */
+function answerError(body, status) {
+	const record = typeof body === "object" && body !== null ? body : {};
+	const error = record.error;
+	return [
+		typeof error === "object" && error !== null ? error.message : void 0,
+		error,
+		record.message
+	].find((value) => typeof value === "string") ?? `HTTP ${status}`;
+}
+/** Reads an answer to its end, saying how many bytes came at most once per interval, and once more at the end. */
+async function readWithProgress(response, onProgress, intervalMs, now = () => performance.now()) {
+	const type = response.headers.get("content-type") ?? "";
+	if (response.body === null) return response.blob();
+	const reader = response.body.getReader();
+	const chunks = [];
+	const progress = {
+		received: 0,
+		reported: Number.NEGATIVE_INFINITY,
+		said: 0
+	};
+	for (;;) {
+		const chunk = await reader.read();
+		if (chunk.done) break;
+		chunks.push(chunk.value);
+		progress.received += chunk.value.byteLength;
+		if (now() - progress.reported >= intervalMs) {
+			progress.reported = now();
+			progress.said = progress.received;
+			onProgress(progress.received);
+		}
+	}
+	if (progress.said !== progress.received) onProgress(progress.received);
+	return new Blob(chunks, { type });
+}
+/** Hands a file to the browser, which saves it under that name. */
+function saveBlob(blob, name) {
+	const link = document.createElement("a");
+	link.download = name;
+	link.href = URL.createObjectURL(blob);
+	document.body.append(link);
+	link.click();
+	link.remove();
+	setTimeout(() => URL.revokeObjectURL(link.href), REVOKE_DELAY_MS);
+}
+export { answerError, dispositionFileName, readWithProgress, saveBlob, urlFileName };

package/dist/lib/icons.d.ts

@@ -1,4 +1,6 @@
 import type { IconNode } from 'lucide';
+/** The width of every glyph's strokes, on lucide's 24-unit grid. */
+export declare const ICON_STROKE_WIDTH = 1.9;
 /**
  * Adds icons to the ones `jl-icon` knows, by name. Any lucide icon works:
  * `registerIcons({ rocket: Rocket })` after `import { Rocket } from 'lucide'`, or all the usual ones at once with
@@ -8,5 +10,7 @@ export declare function registerIcons(icons: Record<string, IconNode>): void;
 /** The names `jl-icon` can draw now, in alphabetical order. */
 export declare const iconNames: () => string[];
 export declare const hasIcon: (name: string) => boolean;
+/** An icon's shapes, by its name; a name nobody registered gives a neutral mark instead of nothing. */
+export declare const iconNode: (name: string) => IconNode;
 /** An icon as an SVG element; a name nobody registered draws a neutral mark instead of nothing. */
 export declare function iconElement(name: string, size: number): SVGElement;