@syware/jlib 0.0.0-stage → 0.1.0

package/dist/molecules/jl-list-item.d.ts

@@ -0,0 +1,56 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * A row of a list: an icon or an avatar, a heading and a description, a short note at the end and trailing
+ * controls. With `href` the row is a link; with `interactive` it fires `press`. Rows next to each other are
+ * separated by a line.
+ */
+export declare class JlListItem extends JlElement {
+    static readonly selector = "jl-list-item";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        press: undefined;
+    }>>;
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** An icon at the start; `slot="start"` takes an avatar instead. */
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** A short note at the end: a time, a count, a size. */
+    readonly meta: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Makes the row a link, named by its heading. The trailing controls stay pressable on their own. */
+    readonly href: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Can be focused and pressed as a whole, and fires `press`. */
+    readonly interactive: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The current row: the open page of a menu, the shown item of a master list. */
+    readonly selected: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** An interactive row without a link fires `press`; a link row leaves the press to the link. */
+    private pressable;
+    private renderInteraction;
+    /** The start holds an avatar when one is slotted, otherwise the icon, otherwise nothing. */
+    private renderStart;
+    private renderEnd;
+}

package/dist/molecules/jl-list-item.js

@@ -0,0 +1,176 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { registerIcons } from "../lib/icons.js";
+import { setOrRemove } from "../lib/dom.js";
+import { hasSlotted } from "../lib/slots.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { isActivationKey, startedOnControl } from "../lib/surface.js";
+import jl_list_item_default from "./jl-list-item.css_raw.js";
+import { css } from "@jadis/core";
+import { ChevronRight } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-list-item.tsx
+registerIcons({ "chevron-right": ChevronRight });
+var ICON_SIZE = 16;
+var CHEVRON_SIZE = 16;
+var DEFAULT_LINK_NAME = "Open";
+/**
+* A row of a list: an icon or an avatar, a heading and a description, a short note at the end and trailing
+* controls. With `href` the row is a link; with `interactive` it fires `press`. Rows next to each other are
+* separated by a line.
+*/
+var JlListItem = class extends JlElement {
+	static selector = "jl-list-item";
+	events = this.useEvents();
+	heading = this.useChange("", (value) => {
+		this._refs.heading.textContent = value;
+		this._refs.linkName.textContent = value || DEFAULT_LINK_NAME;
+	}, { attribute: "heading" });
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+	}, { attribute: "description" });
+	/** An icon at the start; `slot="start"` takes an avatar instead. */
+	icon = this.useChange("", () => this.renderStart(), { attribute: "icon" });
+	/** A short note at the end: a time, a count, a size. */
+	meta = this.useChange("", (value) => {
+		this._refs.meta.textContent = value;
+		this._refs.meta.hidden = value === "";
+	}, { attribute: "meta" });
+	/** Makes the row a link, named by its heading. The trailing controls stay pressable on their own. */
+	href = this.useChange("", () => this.renderInteraction(), { attribute: "href" });
+	/** Can be focused and pressed as a whole, and fires `press`. */
+	interactive = this.useChange(false, () => this.renderInteraction(), { attribute: "interactive" });
+	/** The current row: the open page of a menu, the shown item of a master list. */
+	selected = this.useChange(false, (value) => {
+		this.reflect("selected", value);
+		this.renderInteraction();
+	}, { attribute: "selected" });
+	_refs = this.useRefs((ref) => ({
+		chevron: ref(".chevron"),
+		description: ref(".description"),
+		end: ref(".end"),
+		endSlot: ref("slot[name=\"end\"]"),
+		heading: ref(".heading"),
+		icon: ref(".icon"),
+		iconBox: ref(".icon-box"),
+		item: ref(".item"),
+		link: ref(".link"),
+		linkName: ref(".link-name"),
+		meta: ref(".meta"),
+		start: ref(".start"),
+		startSlot: ref("slot[name=\"start\"]")
+	}));
+	focus(options) {
+		(this.href.get() === "" ? this._refs.item : this._refs.link).focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "item",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("a", {
+					class: "link",
+					"aria-describedby": "description",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("span", { class: "link-name sr-only" })
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					class: "start",
+					hidden: true,
+					children: [/* @__PURE__ */ jsx("span", {
+						class: "icon-box",
+						children: /* @__PURE__ */ jsx(JlIcon, {
+							class: "icon",
+							size: ICON_SIZE
+						})
+					}), /* @__PURE__ */ jsx("slot", { name: "start" })]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					class: "text",
+					children: [/* @__PURE__ */ jsx("span", {
+						class: "heading",
+						id: "heading"
+					}), /* @__PURE__ */ jsx("span", {
+						class: "description",
+						id: "description",
+						hidden: true
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					class: "meta",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("span", {
+					class: "end",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", { name: "end" })
+				}),
+				/* @__PURE__ */ jsx(JlIcon, {
+					class: "chevron",
+					name: "chevron-right",
+					size: CHEVRON_SIZE,
+					hidden: true
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_list_item_default}`;
+	}
+	onConnect() {
+		const item = this._refs.item;
+		this.renderStart();
+		this.renderEnd();
+		this.on(this._refs.startSlot, "slotchange", () => this.renderStart());
+		this.on(this._refs.endSlot, "slotchange", () => this.renderEnd());
+		this.on(item, "click", (event) => {
+			if (this.pressable() && !startedOnControl(event, item)) this.events.emit("press");
+		});
+		this.on(item, "keydown", (event) => {
+			if (this.pressable() && event.composedPath()[0] === item && isActivationKey(event)) {
+				event.preventDefault();
+				this.events.emit("press");
+			}
+		});
+	}
+	/** An interactive row without a link fires `press`; a link row leaves the press to the link. */
+	pressable() {
+		return this.interactive.get() && this.href.get() === "";
+	}
+	renderInteraction() {
+		const href = this.href.get();
+		const item = this._refs.item;
+		const link = this._refs.link;
+		const selected = this.selected.get();
+		setOrRemove(link, "href", href);
+		link.hidden = href === "";
+		this._refs.chevron.hidden = href === "";
+		this.reflect("clickable", this.interactive.get() || href !== "");
+		setOrRemove(link, "aria-current", selected ? "page" : "");
+		if (!this.pressable()) {
+			item.removeAttribute("tabindex");
+			item.removeAttribute("role");
+			item.removeAttribute("aria-labelledby");
+			item.removeAttribute("aria-current");
+			return;
+		}
+		item.tabIndex = 0;
+		item.setAttribute("role", "button");
+		item.setAttribute("aria-labelledby", "heading");
+		setOrRemove(item, "aria-current", selected ? "true" : "");
+	}
+	/** The start holds an avatar when one is slotted, otherwise the icon, otherwise nothing. */
+	renderStart() {
+		const icon = this.icon.get();
+		const slotted = hasSlotted(this._refs.startSlot);
+		this._refs.icon.name.set(icon);
+		this._refs.iconBox.hidden = slotted || icon === "";
+		this._refs.start.hidden = !slotted && icon === "";
+	}
+	renderEnd() {
+		this._refs.end.hidden = !hasSlotted(this._refs.endSlot);
+	}
+};
+JlListItem.register();
+export { JlListItem };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-menu.css?raw
+var jl_menu_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.menu {\n  min-width: 200px;\n  max-width: min(320px, calc(100vw - 16px));\n  max-height: min(420px, calc(100dvh - 16px));\n  padding: 4px;\n  overflow-y: auto;\n}\n\n.menu:focus-visible {\n  box-shadow: var(--jl-shadow-lg), var(--jl-focus-ring);\n}\n\n.item {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  min-height: 32px;\n  padding: 6px 10px;\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n  cursor: pointer;\n  user-select: none;\n}\n\n/* The focused item is the highlighted one, for the pointer as for the keyboard. */\n.item:focus,\n.item:focus-visible {\n  outline: none;\n  box-shadow: none;\n  background: var(--jl-surface-3);\n}\n\n.icon {\n  flex: none;\n  margin-top: 2px;\n  color: var(--jl-muted);\n}\n\n.text {\n  display: grid;\n  flex: 1;\n  min-width: 0;\n}\n\n.label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  line-height: 1.4;\n}\n\n.shortcut {\n  flex: none;\n  margin-left: 12px;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  letter-spacing: 0.02em;\n}\n\n.item[data-danger] {\n  color: var(--jl-danger);\n}\n\n.item[data-danger] .icon {\n  color: inherit;\n}\n\n.item[data-danger]:focus {\n  background: var(--jl-danger-soft);\n}\n\n.item[aria-disabled] {\n  color: var(--jl-faint);\n  cursor: not-allowed;\n}\n\n.item[aria-disabled] .icon,\n.item[aria-disabled] .description {\n  color: inherit;\n}\n\n.heading {\n  padding: 8px 10px 4px;\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 650;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\n.divider {\n  height: 1px;\n  margin: 4px -4px;\n  border: none;\n  background: var(--jl-line);\n}\n";
+export { jl_menu_default as default };

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

@@ -0,0 +1,62 @@
+import { JlElement } from '../base/jl-element';
+import type { Placement } from '../types/floating.types';
+import type { MenuItem } from '../types/jl-menu.types';
+/**
+ * A list of actions that opens from its trigger (`slot="trigger"`, any button): on a press or with ArrowDown. Arrows,
+ * Home, End and the first letter move through it; Enter chooses, Escape closes. `select` fires with the value.
+ */
+export declare class JlMenu extends JlElement {
+    static readonly selector = "jl-menu";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        select: string;
+        open: undefined;
+        close: undefined;
+    }>>;
+    readonly items: Readonly<Readonly<{
+        get(): MenuItem[];
+        set(setter: MenuItem[] | ((prevState: MenuItem[]) => MenuItem[])): void;
+    }>>;
+    /** Where the menu goes; it flips to the other side when there is no room. */
+    readonly placement: Readonly<Readonly<{
+        get(): Placement;
+        set(setter: ((prevState: Placement) => Placement) | Placement): void;
+    }>>;
+    /** The menu's name for screen readers; the trigger names it otherwise. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _state;
+    private readonly _refs;
+    /** Opens the menu and focuses its first item. */
+    show(): void;
+    hide(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    private triggerElement;
+    private isOpen;
+    /** Every item, the disabled ones included, in order. */
+    private allItems;
+    /** The items people can choose. */
+    private menuItems;
+    private enabledFlags;
+    private onTriggerClick;
+    private onTriggerKeydown;
+    private onMenuKeydown;
+    private open;
+    private close;
+    private focusItem;
+    /** Chooses an item people picked: the menu closes, the focus goes back to the trigger, and `select` fires. */
+    private chooseItem;
+    private onToggle;
+    private focusIsInMenu;
+    /** Keeps the menu by the trigger while it is open. */
+    private follow;
+    private renderTrigger;
+    private renderName;
+    private renderItems;
+    private section;
+    private entry;
+}

package/dist/molecules/jl-menu.js

@@ -0,0 +1,288 @@
+import { BASE_STYLES, FLOATING_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf, oneOf } from "../lib/attributes.js";
+import { PLACEMENTS, followAnchor } from "../lib/floating.js";
+import { uniqueId } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { firstIndex, lastIndex, letterIndex, stepIndex } from "../lib/roving.js";
+import { setTriggerAria } from "../lib/trigger.js";
+import jl_menu_default from "./jl-menu.css_raw.js";
+import { css } from "@jadis/core";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-menu.tsx
+var ICON_SIZE = 16;
+var CLOSED = "closed";
+var ITEM_SELECTOR = "[role=\"menuitem\"]";
+var KEY_MOVES = /* @__PURE__ */ new Map([
+	["ArrowDown", (enabled, from) => stepIndex(enabled, from, 1)],
+	["ArrowUp", (enabled, from) => stepIndex(enabled, from, -1)],
+	["End", lastIndex],
+	["Home", firstIndex]
+]);
+var OPENING_KEYS = /* @__PURE__ */ new Map([["ArrowDown", firstIndex], ["ArrowUp", lastIndex]]);
+var CHOOSING_KEYS = /* @__PURE__ */ new Set(["Enter", " "]);
+/** The items split under their headings; what comes before the first heading has none. */
+function sectionsOf(items) {
+	const sections = [{
+		entries: [],
+		heading: ""
+	}];
+	for (const item of items) {
+		if ("heading" in item) {
+			sections.push({
+				entries: [],
+				heading: item.heading
+			});
+			continue;
+		}
+		sections.at(-1)?.entries.push(item);
+	}
+	return sections;
+}
+/** A single printable character typed without a modifier: a letter for typeahead. */
+var isTypeahead = (event) => event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey;
+/**
+* A list of actions that opens from its trigger (`slot="trigger"`, any button): on a press or with ArrowDown. Arrows,
+* Home, End and the first letter move through it; Enter chooses, Escape closes. `select` fires with the value.
+*/
+var JlMenu = class extends JlElement {
+	static selector = "jl-menu";
+	events = this.useEvents();
+	items = this.useChange([], () => this.renderItems(), {
+		attribute: "items",
+		parse: jsonOf([])
+	});
+	/** Where the menu goes; it flips to the other side when there is no room. */
+	placement = this.useChange("bottom-start", () => this.follow(), {
+		attribute: "placement",
+		parse: oneOf(PLACEMENTS, "bottom-start")
+	});
+	/** The menu's name for screen readers; the trigger names it otherwise. */
+	label = this.useChange("", () => this.renderName(), { attribute: "label" });
+	_state = {
+		following: new AbortController(),
+		openAtPointerDown: false
+	};
+	_refs = this.useRefs((ref) => ({
+		menu: ref(".menu"),
+		trigger: ref("slot[name=\"trigger\"]")
+	}));
+	/** Opens the menu and focuses its first item. */
+	show() {
+		this.whenRendered(() => this.open(firstIndex));
+	}
+	hide() {
+		this.whenRendered(() => this.close());
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("slot", { name: "trigger" }), /* @__PURE__ */ jsx("div", {
+			class: "floating panel menu",
+			popover: "auto",
+			role: "menu",
+			tabIndex: -1,
+			attrs: { part: "base" }
+		})] });
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${FLOATING_STYLES}${jl_menu_default}`;
+	}
+	onConnect() {
+		const menu = this._refs.menu;
+		const trigger = this._refs.trigger;
+		this.renderTrigger();
+		this.on(trigger, "slotchange", () => this.renderTrigger());
+		this.on(trigger, "pointerdown", () => {
+			this._state.openAtPointerDown = this.isOpen();
+		});
+		this.on(trigger, "click", () => this.onTriggerClick());
+		this.on(trigger, "keydown", (event) => this.onTriggerKeydown(event));
+		this.on(menu, "keydown", (event) => this.onMenuKeydown(event));
+		this.on(menu, "click", (event) => this.chooseItem(event.target.closest(ITEM_SELECTOR)));
+		this.on(menu, "pointermove", (event) => {
+			const item = event.target.closest(ITEM_SELECTOR);
+			if (item !== null && this.menuItems().includes(item) && item !== this.shadowRoot?.activeElement) item.focus();
+		});
+		this.on(menu, "focusout", () => {
+			window.setTimeout(() => {
+				if (!this.focusIsInMenu()) this.close();
+			});
+		});
+		this.on(menu, "toggle", (event) => this.onToggle(event.newState !== CLOSED));
+	}
+	onDisconnect() {
+		this._state.following.abort();
+	}
+	triggerElement() {
+		const [element] = this._refs.trigger.assignedElements({ flatten: true });
+		return element instanceof HTMLElement ? element : null;
+	}
+	isOpen() {
+		return this._refs.menu.matches(":popover-open");
+	}
+	/** Every item, the disabled ones included, in order. */
+	allItems() {
+		return [...this._refs.menu.querySelectorAll(ITEM_SELECTOR)];
+	}
+	/** The items people can choose. */
+	menuItems() {
+		return this.allItems().filter((item) => !item.hasAttribute("aria-disabled"));
+	}
+	enabledFlags() {
+		return this.allItems().map((item) => !item.hasAttribute("aria-disabled"));
+	}
+	onTriggerClick() {
+		const closedByPointer = this._state.openAtPointerDown;
+		this._state.openAtPointerDown = false;
+		if (closedByPointer || this.isOpen()) {
+			this.close();
+			return;
+		}
+		this.open(firstIndex);
+	}
+	onTriggerKeydown(event) {
+		const focusFirst = OPENING_KEYS.get(event.key);
+		if (focusFirst === void 0) return;
+		event.preventDefault();
+		this.open(focusFirst);
+	}
+	onMenuKeydown(event) {
+		const items = this.allItems();
+		const from = items.indexOf(event.target);
+		const move = KEY_MOVES.get(event.key);
+		if (move !== void 0) {
+			event.preventDefault();
+			this.focusItem(move(this.enabledFlags(), from));
+			return;
+		}
+		if (CHOOSING_KEYS.has(event.key)) {
+			event.preventDefault();
+			this.chooseItem(items[from] ?? null);
+			return;
+		}
+		if (event.key === "Escape") {
+			event.preventDefault();
+			this.close();
+			this.triggerElement()?.focus();
+			return;
+		}
+		if (isTypeahead(event)) {
+			const labels = items.map((item) => item.querySelector(".label")?.textContent ?? "");
+			this.focusItem(letterIndex(labels, this.enabledFlags(), from, event.key));
+		}
+	}
+	open(focusFirst) {
+		const menu = this._refs.menu;
+		if (!this.isOpen()) {
+			menu.showPopover();
+			this.follow();
+		}
+		const index = focusFirst(this.enabledFlags());
+		if (index === -1) {
+			menu.focus();
+			return;
+		}
+		this.focusItem(index);
+	}
+	close() {
+		if (this.isOpen()) this._refs.menu.hidePopover();
+	}
+	focusItem(index) {
+		this.allItems()[index]?.focus();
+	}
+	/** Chooses an item people picked: the menu closes, the focus goes back to the trigger, and `select` fires. */
+	chooseItem(item) {
+		if (!(item instanceof HTMLElement) || item.hasAttribute("aria-disabled")) return;
+		this.close();
+		this.triggerElement()?.focus();
+		this.events.emit("select", item.dataset.value ?? "");
+	}
+	onToggle(open) {
+		this.renderTrigger();
+		if (!open) this._state.following.abort();
+		this.events.emit(open ? "open" : "close");
+	}
+	focusIsInMenu() {
+		const active = this.shadowRoot?.activeElement ?? null;
+		return active !== null && this._refs.menu.contains(active);
+	}
+	/** Keeps the menu by the trigger while it is open. */
+	follow() {
+		this._state.following.abort();
+		const trigger = this.triggerElement();
+		if (!this.isOpen() || trigger === null) return;
+		this._state.following = new AbortController();
+		followAnchor(trigger, this._refs.menu, this.placement.get(), this._state.following.signal);
+	}
+	renderTrigger() {
+		const trigger = this.triggerElement();
+		if (trigger === null) return;
+		setTriggerAria(trigger, "aria-haspopup", "menu");
+		setTriggerAria(trigger, "aria-expanded", String(this.isOpen()));
+		this.renderName();
+	}
+	renderName() {
+		const menu = this._refs.menu;
+		const label = this.label.get();
+		if (label !== "") {
+			menu.setAttribute("aria-label", label);
+			menu.ariaLabelledByElements = null;
+			return;
+		}
+		menu.removeAttribute("aria-label");
+		const trigger = this.triggerElement();
+		menu.ariaLabelledByElements = trigger === null ? null : [trigger];
+	}
+	renderItems() {
+		this._refs.menu.replaceChildren(...sectionsOf(this.items.get()).map((section) => this.section(section)));
+	}
+	section(section) {
+		const entries = section.entries.map((entry) => this.entry(entry));
+		if (section.heading === "") return /* @__PURE__ */ jsx(Fragment, { children: entries });
+		const id = uniqueId("jl-menu-heading");
+		return /* @__PURE__ */ jsxs("div", {
+			class: "group",
+			role: "group",
+			"aria-labelledby": id,
+			children: [/* @__PURE__ */ jsx("div", {
+				class: "heading",
+				id,
+				role: "presentation",
+				children: section.heading
+			}), entries]
+		});
+	}
+	entry(entry) {
+		if ("divider" in entry) return /* @__PURE__ */ jsx("hr", { class: "divider" });
+		return /* @__PURE__ */ jsxs("div", {
+			class: "item",
+			role: "menuitem",
+			tabIndex: -1,
+			"data-value": entry.value,
+			"data-danger": entry.danger === true ? "" : void 0,
+			"aria-disabled": entry.disabled === true ? "true" : void 0,
+			children: [
+				entry.icon === void 0 ? "" : /* @__PURE__ */ jsx(JlIcon, {
+					class: "icon",
+					name: entry.icon,
+					size: ICON_SIZE
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					class: "text",
+					children: [/* @__PURE__ */ jsx("span", {
+						class: "label",
+						children: entry.label
+					}), entry.description === void 0 ? "" : /* @__PURE__ */ jsx("span", {
+						class: "description",
+						children: entry.description
+					})]
+				}),
+				entry.shortcut === void 0 ? "" : /* @__PURE__ */ jsx("kbd", {
+					class: "shortcut",
+					children: entry.shortcut
+				})
+			]
+		});
+	}
+};
+JlMenu.register();
+export { JlMenu };

package/dist/molecules/jl-number-input.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-number-input.css?raw
+var jl_number_input_default = ":host {\n  display: block;\n}\n\n.control {\n  padding: 0 8px;\n}\n\n.native {\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n\n.action {\n  margin-right: 0;\n}\n\n.action:disabled {\n  background: none;\n  color: var(--jl-faint);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n:host([size=\"sm\"]) .action {\n  width: 22px;\n  height: 22px;\n}\n\n:host([size=\"lg\"]) .action {\n  width: 30px;\n  height: 30px;\n}\n";
+export { jl_number_input_default as default };

package/dist/molecules/jl-number-input.d.ts

@@ -0,0 +1,81 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A number field with − and + buttons. The arrow keys step it (Page Up/Down by ten steps, Home and End to the
+ * bounds); what is typed is read and kept between `min` and `max` when the field is left. Empty is `null`.
+ */
+export declare class JlNumberInput extends JlFormControl {
+    static readonly selector = "jl-number-input";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: number | null;
+    }>>;
+    readonly min: Readonly<Readonly<{
+        get(): number | null;
+        set(setter: number | ((prevState: number | null) => number | null) | null): void;
+    }>>;
+    readonly max: Readonly<Readonly<{
+        get(): number | null;
+        set(setter: number | ((prevState: number | null) => number | null) | null): void;
+    }>>;
+    readonly step: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The number, or `null` while the field is empty. */
+    readonly value: Readonly<Readonly<{
+        get(): number | null;
+        set(setter: number | ((prevState: number | null) => number | null) | null): void;
+    }>>;
+    readonly placeholder: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The field's name for screen readers, when no visible label names it. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    readonly required: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Draws the field in the danger colour, for an error the page found itself. */
+    readonly invalid: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _state;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    /** Adds one step (or `count` steps, negative to go down), within the bounds, and fires `change`. */
+    stepBy(count: number): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    protected resetValue(): void;
+    /** The browser calls it for a disabled fieldset and for the element's own disabled attribute, even before render. */
+    protected setDisabledByForm(disabled: boolean): void;
+    private onKey;
+    /** Home and End go to a bound when there is one, and otherwise move the caret as in any field. */
+    private goToBound;
+    /** The number typed so far, or the value when the text cannot be read. */
+    private typedNumber;
+    /** Reads what was typed: empty gives null, unreadable text goes back to the value, a number is kept in bounds. */
+    private commitText;
+    private commitNumber;
+    private commit;
+    private renderValue;
+    private renderBounds;
+    private renderDisabled;
+    /** A button that cannot move the value further is disabled. */
+    private renderButtons;
+    private renderValidity;
+}