@syware/jlib 0.5.1 → 0.7.0

package/dist/all.js

@@ -8,8 +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, 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";
@@ -42,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";
@@ -72,12 +78,13 @@ 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 } from "./templates/jl-split-view.js";
+import { JlSplitView, SPLIT_ORIENTATIONS, SPLIT_PANES } from "./templates/jl-split-view.js";
 // src/all.ts
 registerIcons(COMMON_ICONS);
-define(JlAccordion, JlAccordionItem, JlAccountButton, JlAlert, JlAppShell, 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, JlAppShell, 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, 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.css_raw.js

@@ -0,0 +1,3 @@
+// src/atoms/jl-app-icon.css?raw
+var jl_app_icon_default = ":host {\n  display: inline-flex;\n  flex: none;\n  vertical-align: middle;\n}\n\n/* The same in both themes, as the favicon is: the brand's blue, the glyph in white. */\n.tile {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size, 28px);\n  height: var(--size, 28px);\n  border-radius: var(--corner, 7px);\n  background: var(--jl-brand);\n  color: var(--jl-on-brand);\n}\n";
+export { jl_app_icon_default as default };

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

@@ -0,0 +1,34 @@
+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
+ * screen icon draw the same tile. The SyWare mark stays the company's. Decorative unless it has a `label`.
+ */
+export declare class JlAppIcon extends JlElement {
+    static readonly selector = "jl-app-icon";
+    /** The app's glyph, a registered icon name: `workflow`, `package`. */
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The tile's side, in pixels. */
+    readonly size: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The app's name, for screen readers when no wordmark beside it says it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    private renderSize;
+    private renderLabel;
+}

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

@@ -0,0 +1,86 @@
+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";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/atoms/jl-app-icon.tsx
+var DEFAULT_SIZE = 28;
+var MIN_SIZE = 12;
+var MAX_SIZE = 512;
+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
+* screen icon draw the same tile. The SyWare mark stays the company's. Decorative unless it has a `label`.
+*/
+var JlAppIcon = class extends JlElement {
+	static selector = "jl-app-icon";
+	/** The app's glyph, a registered icon name: `workflow`, `package`. */
+	icon = this.useChange("", (value) => this._refs.glyph.name.set(value), { attribute: "icon" });
+	/** The tile's side, in pixels. */
+	size = this.useChange(DEFAULT_SIZE, (value) => this.renderSize(value), {
+		attribute: "size",
+		parse: clampedNumber(DEFAULT_SIZE, MIN_SIZE, MAX_SIZE)
+	});
+	/** 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(JlIcon),
+		tile: ref(".tile")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("span", {
+			class: "tile",
+			"aria-hidden": "true",
+			attrs: { part: "base" },
+			children: /* @__PURE__ */ jsx(JlIcon, { size: Math.round(DEFAULT_SIZE * GLYPH_SHARE) })
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_app_icon_default}`;
+	}
+	renderSize(size) {
+		this._refs.tile.style.setProperty("--size", `${size}px`);
+		this._refs.tile.style.setProperty("--corner", `${Math.round(size * CORNER_SHARE)}px`);
+		this._refs.glyph.size.set(Math.round(size * GLYPH_SHARE));
+	}
+	renderLabel(label) {
+		const tile = this._refs.tile;
+		if (label === "") {
+			tile.setAttribute("aria-hidden", "true");
+			tile.removeAttribute("role");
+			tile.removeAttribute("aria-label");
+			return;
+		}
+		tile.removeAttribute("aria-hidden");
+		tile.setAttribute("role", "img");
+		tile.setAttribute("aria-label", label);
+	}
+};
+JlAppIcon.register();
+export { JlAppIcon, setFavicon };

package/dist/atoms/jl-avatar.js

@@ -2,11 +2,11 @@ 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 { JlIcon } from "./jl-icon.js";
 import { initialsOf, pickStable } from "../lib/avatar.js";
 import { setOrRemove } from "../lib/dom.js";
 import { hasSlotted } from "../lib/slots.js";
 import jl_avatar_default from "./jl-avatar.css_raw.js";
-import { JlIcon } from "./jl-icon.js";
 import { css } from "@jadis/core";
 import { User } from "lucide";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";

package/dist/atoms/jl-badge.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 { TONES } from "../lib/options.js";
-import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "./jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import jl_badge_default from "./jl-badge.css_raw.js";
 import { css } from "@jadis/core";
 import { jsx, jsxs } from "@jadis/core/jsx-runtime";
@@ -31,11 +31,18 @@ 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. */
 	showStatus(look) {
+		const attributes = {
+			hint: look.hint ?? "",
+			icon: look.icon ?? "",
+			label: look.label,
+			tone: look.tone
+		};
+		for (const [name, value] of Object.entries(attributes)) setOrRemove(this, name, value);
 		this.label.set(look.label);
 		this.tone.set(look.tone);
 		this.icon.set(look.icon ?? "");

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

@@ -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 { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "./jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import jl_button_default from "./jl-button.css_raw.js";
 import { JlSpinner } from "./jl-spinner.js";
 import { css } from "@jadis/core";
@@ -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,8 +3,9 @@ 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 { setOrRemove } from "../lib/dom.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";
 import { css } from "@jadis/core";
 import { Eye, EyeOff, X } from "lucide";
@@ -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

@@ -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 { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "./jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import jl_link_default from "./jl-link.css_raw.js";
 import { css } from "@jadis/core";
 import { ExternalLink } from "lucide";
@@ -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,10 +1,10 @@
-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";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove } from "../lib/dom.js";
 import { JlIcon } from "./jl-icon.js";
+import { setOrRemove } from "../lib/dom.js";
 import { groupOptions } from "../lib/option-groups.js";
 import jl_select_default from "./jl-select.css_raw.js";
 import { css } from "@jadis/core";
@@ -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,8 @@ 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';
 export * from './atoms/jl-button';
@@ -96,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';
@@ -129,5 +138,6 @@ export * from './organisms/jl-table';
 export * from './organisms/jl-toaster';
 export * from './organisms/jl-tree';
 export * from './templates/jl-app-shell';
+export * from './templates/jl-auth-layout';
 export * from './templates/jl-page';
 export * from './templates/jl-split-view';

package/dist/index.js

@@ -8,8 +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, 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";
@@ -42,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";
@@ -72,9 +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 } 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, JlAppShell, 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, 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 };
+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, 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;