@syware/jlib 0.0.0-stage → 0.1.0

package/dist/organisms/jl-table.js

@@ -0,0 +1,318 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf, oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { JlBadge } from "../atoms/jl-badge.js";
+import { columnAlign, columnWidth, formatCell, nextSortDirection, rowKeyOf, selectionState, sortRows, toggleAll, toggleKey } from "../lib/table.js";
+import jl_table_default from "./jl-table.css_raw.js";
+import { css } from "@jadis/core";
+import { ArrowDown, ArrowUp, ChevronsUpDown, Inbox } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-table.tsx
+registerIcons({
+	"arrow-down": ArrowDown,
+	"arrow-up": ArrowUp,
+	"chevrons-up-down": ChevronsUpDown,
+	inbox: Inbox
+});
+var TABLE_SORT_DIRECTIONS = [
+	"none",
+	"asc",
+	"desc"
+];
+var DEFAULT_ROW_KEY = "id";
+var DEFAULT_EMPTY_TEXT = "No data";
+var SKELETON_ROWS = 5;
+var SORT_ICON_SIZE = 14;
+var EMPTY_ICON_SIZE = 18;
+var NO_SORT = "none";
+var ARIA_SORT = {
+	asc: "ascending",
+	desc: "descending",
+	none: ""
+};
+var SORT_ICONS = {
+	asc: "arrow-up",
+	desc: "arrow-down",
+	none: "chevrons-up-down"
+};
+var CELL_MAKERS = {
+	badge: (text, column) => text === "" ? "" : /* @__PURE__ */ jsx(JlBadge, {
+		label: text,
+		tone: column.tones?.[text] ?? "neutral"
+	}),
+	code: (text) => text === "" ? "" : /* @__PURE__ */ jsx("code", { children: text }),
+	date: (text) => text,
+	number: (text) => text,
+	text: (text) => text
+};
+/** A checkbox drawn by the table: a native input for the keyboard and the form of things, its mark in CSS. */
+function checkbox(label, index) {
+	return /* @__PURE__ */ jsxs("span", {
+		class: "check",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			class: "checkbox",
+			"aria-label": label,
+			"data-index": index ?? void 0
+		}), /* @__PURE__ */ jsx("span", {
+			class: "mark",
+			"aria-hidden": "true"
+		})]
+	});
+}
+/**
+* Rows of data under column headings. `columns` say what each column shows and how (`format`: text, number, date,
+* badge, code); `rows` are plain objects. Sortable headings cycle ascending, descending and unsorted, and sort the
+* rows in place; `selectable` adds a checkbox column. The header stays on top while the rows scroll within
+* `max-height`, and the table scrolls sideways on narrow screens. Cells of a column can be drawn by code with
+* `renderers`.
+*/
+var JlTable = class extends JlElement {
+	static selector = "jl-table";
+	events = this.useEvents();
+	columns = this.useChange([], () => this.schedule("head", "body"), {
+		attribute: "columns",
+		parse: jsonOf([])
+	});
+	rows = this.useChange([], () => this.schedule("body"), {
+		attribute: "rows",
+		parse: jsonOf([])
+	});
+	/** The field that tells rows apart, for the selection. */
+	rowKey = this.useChange(DEFAULT_ROW_KEY, () => this.schedule("body"), { attribute: "row-key" });
+	/** The column the rows are sorted by. */
+	sortKey = this.useChange("", () => this.schedule("body"), { attribute: "sort-key" });
+	sortDirection = this.useChange(NO_SORT, () => this.schedule("body"), {
+		attribute: "sort-direction",
+		parse: oneOf(TABLE_SORT_DIRECTIONS, NO_SORT)
+	});
+	/** Adds a checkbox to each row, and one in the header that selects them all. */
+	selectable = this.useChange(false, (value) => {
+		this.reflect("selectable", value);
+		this.schedule("head", "body");
+	}, { attribute: "selectable" });
+	/** The keys of the selected rows. */
+	selected = this.useChange([], () => this.renderSelection(), {
+		attribute: "selected",
+		parse: jsonOf([])
+	});
+	/** Shorter rows, for long lists. */
+	dense = this.useChange(false, (value) => this.reflect("dense", value), { attribute: "dense" });
+	/** Shades every other row. */
+	striped = this.useChange(false, (value) => this.reflect("striped", value), { attribute: "striped" });
+	/** A CSS height past which the rows scroll under the header: `320px`, `50vh`; a number is pixels. */
+	maxHeight = this.useChange("", (value) => this.renderMaxHeight(value), { attribute: "max-height" });
+	/** What the table says when it has no rows. */
+	emptyText = this.useChange(DEFAULT_EMPTY_TEXT, () => this.schedule("body"), { attribute: "empty-text" });
+	/** Shows placeholder rows while the data loads. */
+	loading = this.useChange(false, (value) => {
+		this.reflect("loading", value);
+		setOrRemove(this._refs.table, "aria-busy", value ? "true" : "");
+		this.schedule("body");
+	}, { attribute: "loading" });
+	/** The table's name for screen readers. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.table, "aria-label", value), { attribute: "label" });
+	/** Draws the cells of some columns by code, by column key: `{ name: (row) => <strong>{row.name}</strong> }`. */
+	renderers = this.useChange({}, () => this.schedule("body"));
+	_pending = {
+		body: false,
+		head: false,
+		queued: false
+	};
+	/** The keys of the rows as drawn, by their place: the checkboxes carry the place. */
+	_view = { keys: [] };
+	_refs = this.useRefs((ref) => ({
+		body: ref("tbody"),
+		head: ref("thead"),
+		table: ref("table")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("div", {
+			class: "scroll",
+			attrs: { part: "base" },
+			children: /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", {}), /* @__PURE__ */ jsx("tbody", {})] })
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_table_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.head, "click", (event) => {
+			const key = event.target.closest("button.sort")?.dataset.key;
+			if (key !== void 0) this.sortBy(key);
+		});
+		this.on(this._refs.table, "change", (event) => {
+			const input = event.target;
+			if (input instanceof HTMLInputElement && input.classList.contains("checkbox")) this.changeSelection(input);
+		});
+	}
+	/** Draws on the next microtask: the inputs set while connecting give one drawing, not one each. */
+	schedule(...parts) {
+		for (const part of parts) this._pending[part] = true;
+		if (this._pending.queued) return;
+		this._pending.queued = true;
+		queueMicrotask(() => this.flush());
+	}
+	flush() {
+		const { body, head } = this._pending;
+		this._pending.body = false;
+		this._pending.head = false;
+		this._pending.queued = false;
+		if (head) this.renderHead();
+		this.renderSortState();
+		if (body) this.renderBody();
+		this.renderSelection();
+	}
+	sortBy(key) {
+		const current = key === this.sortKey.get() ? this.sortDirection.get() : NO_SORT;
+		const direction = nextSortDirection(current);
+		this.sortKey.set(key);
+		this.sortDirection.set(direction);
+		this.events.emit("sort", {
+			direction,
+			key
+		});
+	}
+	changeSelection(input) {
+		const index = input.dataset.index;
+		const selected = this.selected.get();
+		const keys = index === void 0 ? toggleAll(this._view.keys, new Set(selected)) : toggleKey(selected, this._view.keys[Number(index)] ?? Number(index), input.checked);
+		this.selected.set(keys);
+		this.events.emit("selection", keys);
+	}
+	renderMaxHeight(value) {
+		const height = /^\d+(\.\d+)?$/.test(value.trim()) ? `${value.trim()}px` : value;
+		this.style.setProperty("--max-height", height === "" ? "none" : height);
+		this.reflect("scrolls", height !== "");
+	}
+	renderHead() {
+		const selectAll = this.selectable.get() ? /* @__PURE__ */ jsx("th", {
+			class: "select-cell",
+			scope: "col",
+			children: checkbox("Select all rows", null)
+		}) : null;
+		this._refs.head.replaceChildren(/* @__PURE__ */ jsxs("tr", { children: [selectAll, this.columns.get().map((column) => this.headerCell(column))] }));
+	}
+	headerCell(column) {
+		const content = column.sortable ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			class: "sort",
+			"data-key": column.key,
+			children: [/* @__PURE__ */ jsx("span", { children: column.label }), /* @__PURE__ */ jsx(JlIcon, {
+				class: "sort-icon",
+				size: SORT_ICON_SIZE
+			})]
+		}) : column.label;
+		const cell = /* @__PURE__ */ jsx("th", {
+			scope: "col",
+			class: `align-${columnAlign(column)}`,
+			"data-key": column.key,
+			children: content
+		});
+		cell.style.width = columnWidth(column.width);
+		return cell;
+	}
+	/** The arrows and `aria-sort` of the headings, changed in place so a pressed heading keeps the focus. */
+	renderSortState() {
+		const sortKey = this.sortKey.get();
+		for (const cell of this._refs.head.querySelectorAll("th[data-key]")) {
+			const direction = cell.dataset.key === sortKey ? this.sortDirection.get() : NO_SORT;
+			const sortable = cell.querySelector(".sort") !== null;
+			setOrRemove(cell, "aria-sort", sortable ? ARIA_SORT[direction] : "");
+			cell.querySelector(".sort-icon")?.name.set(SORT_ICONS[direction]);
+			cell.toggleAttribute("data-sorted", direction !== NO_SORT);
+		}
+	}
+	sortedRows() {
+		const key = this.sortKey.get();
+		const format = this.columns.get().find((column) => column.key === key)?.format;
+		return sortRows(this.rows.get(), key, this.sortDirection.get(), format);
+	}
+	renderBody() {
+		const columns = this.columns.get();
+		const span = columns.length + Number(this.selectable.get());
+		if (this.loading.get()) {
+			this._view.keys = [];
+			this._refs.body.replaceChildren(...this.skeletonRows(columns));
+			return;
+		}
+		const rows = this.rows.get();
+		if (rows.length === 0) {
+			this._view.keys = [];
+			this._refs.body.replaceChildren(this.emptyRow(span));
+			return;
+		}
+		const keyField = this.rowKey.get();
+		const keys = new Map(rows.map((row, index) => [row, rowKeyOf(row, keyField, index)]));
+		const sorted = this.sortedRows();
+		this._view.keys = sorted.map((row, index) => keys.get(row) ?? index);
+		this._refs.body.replaceChildren(...sorted.map((row, index) => this.bodyRow(row, index, columns)));
+	}
+	bodyRow(row, index, columns) {
+		const first = columns[0];
+		const name = first === void 0 ? String(index + 1) : formatCell(row[first.key], first.format);
+		const select = this.selectable.get() ? /* @__PURE__ */ jsx("td", {
+			class: "select-cell",
+			children: checkbox(`Select ${name}`, index)
+		}) : null;
+		return /* @__PURE__ */ jsxs("tr", { children: [select, columns.map((column) => /* @__PURE__ */ jsx("td", {
+			class: `align-${columnAlign(column)} format-${column.format ?? "text"}`,
+			children: this.cell(row, column)
+		}))] });
+	}
+	cell(row, column) {
+		const renderer = this.renderers.get()[column.key];
+		if (renderer !== void 0) return renderer(row);
+		const format = column.format ?? "text";
+		return CELL_MAKERS[format](formatCell(row[column.key], format), column);
+	}
+	skeletonRows(columns) {
+		const select = this.selectable.get();
+		return Array.from({ length: SKELETON_ROWS }, () => /* @__PURE__ */ jsxs("tr", {
+			class: "skeleton",
+			children: [select ? /* @__PURE__ */ jsx("td", {
+				class: "select-cell",
+				children: /* @__PURE__ */ jsx("span", { class: "bone box" })
+			}) : null, columns.map((column) => /* @__PURE__ */ jsx("td", {
+				class: `align-${columnAlign(column)}`,
+				children: /* @__PURE__ */ jsx("span", { class: "bone" })
+			}))]
+		}));
+	}
+	emptyRow(span) {
+		return /* @__PURE__ */ jsx("tr", {
+			class: "empty",
+			children: /* @__PURE__ */ jsx("td", {
+				colSpan: Math.max(1, span),
+				children: /* @__PURE__ */ jsxs("span", {
+					class: "empty-content",
+					children: [/* @__PURE__ */ jsx(JlIcon, {
+						name: "inbox",
+						size: EMPTY_ICON_SIZE
+					}), /* @__PURE__ */ jsx("span", { children: this.emptyText.get() })]
+				})
+			})
+		});
+	}
+	/** The checkboxes and the shading of selected rows, changed in place. */
+	renderSelection() {
+		const selected = new Set(this.selected.get());
+		for (const input of this._refs.body.querySelectorAll("input.checkbox")) {
+			const key = this._view.keys[Number(input.dataset.index)];
+			const on = key !== void 0 && selected.has(key);
+			input.checked = on;
+			input.closest("tr")?.toggleAttribute("data-selected", on);
+		}
+		const all = this._refs.head.querySelector("input.checkbox");
+		if (all === null) return;
+		const state = selectionState(this._view.keys, selected);
+		all.checked = state === "all";
+		all.indeterminate = state === "some";
+		all.disabled = this._view.keys.length === 0;
+	}
+};
+JlTable.register();
+export { JlTable, TABLE_SORT_DIRECTIONS };

package/dist/organisms/jl-toaster.css_raw.js

@@ -0,0 +1,3 @@
+// src/organisms/jl-toaster.css?raw
+var jl_toaster_default = ":host {\n  display: contents;\n  --edge: 16px;\n  --width: 380px;\n}\n\n.region {\n  position: fixed;\n  inset: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: min(var(--width), calc(100vw - 2 * var(--edge)));\n  margin: 0;\n  padding: 0;\n  overflow: visible;\n  border: none;\n  background: none;\n  color: var(--jl-text);\n  /* The empty space between toasts lets clicks through to the page. */\n  pointer-events: none;\n}\n\n.region:not(:popover-open) {\n  display: none;\n}\n\n::slotted(*) {\n  pointer-events: auto;\n}\n\n::slotted([data-stacked]) {\n  display: none;\n}\n\n:host([placement=\"bottom-right\"]) .region {\n  right: var(--edge);\n  bottom: var(--edge);\n}\n\n:host([placement=\"bottom-left\"]) .region {\n  bottom: var(--edge);\n  left: var(--edge);\n}\n\n:host([placement=\"bottom-center\"]) .region {\n  bottom: var(--edge);\n  left: 50%;\n  translate: -50% 0;\n}\n\n/* At the top, the newest toast is the highest one, and toasts come in from above. */\n:host([placement^=\"top\"]) .region {\n  top: var(--edge);\n  flex-direction: column-reverse;\n}\n\n:host([placement^=\"top\"]) ::slotted(*) {\n  --jl-toast-enter: -8px;\n}\n\n:host([placement=\"top-right\"]) .region {\n  right: var(--edge);\n}\n\n:host([placement=\"top-center\"]) .region {\n  left: 50%;\n  translate: -50% 0;\n}\n";
+export { jl_toaster_default as default };

package/dist/organisms/jl-toaster.d.ts

@@ -0,0 +1,48 @@
+import { JlElement } from '../base/jl-element';
+import type { ToasterPlacement, ToastHandle, ToastOptions } from '../types/jl-toaster.types';
+export declare const TOASTER_PLACEMENTS: readonly ToasterPlacement[];
+/**
+ * The corner of the window where notifications stack, newest nearest the edge, at most `max` at a time. It lives in
+ * the top layer, so it shows over open dialogs, and its live region reads new toasts to screen readers. Pages
+ * usually call `toast({ heading, text, tone })`, which finds or makes the page's toaster.
+ */
+export declare class JlToaster extends JlElement {
+    static readonly selector = "jl-toaster";
+    readonly placement: Readonly<Readonly<{
+        get(): ToasterPlacement;
+        set(setter: ((prevState: ToasterPlacement) => ToasterPlacement) | ToasterPlacement): void;
+    }>>;
+    /** How many toasts show at once; older ones wait for newer ones to close. */
+    readonly max: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The region's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _watched;
+    private readonly _refs;
+    /** Shows a notification; `duration` is 5 seconds unless given, and it has a close button unless told not to. */
+    notify(options: ToastOptions): ToastHandle;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    private toasts;
+    /** The newest `max` toasts show; the older ones wait. A dismissed toast leaves the toaster. */
+    private renderStack;
+    private watch;
+    private renderOpen;
+    /**
+     * Puts the toaster back on top of the top layer, above a dialog opened since it showed. Not while a toast holds
+     * the focus: hiding the region for a moment would drop it.
+     */
+    private raise;
+}
+/**
+ * Shows a notification in the page's toaster, made on first use: `toast({ heading: 'Saved', tone: 'ok' })`.
+ * Returns a handle to close it early.
+ */
+export declare function toast(options: ToastOptions): ToastHandle;

package/dist/organisms/jl-toaster.js

@@ -0,0 +1,142 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { JlToast } from "../molecules/jl-toast.js";
+import jl_toaster_default from "./jl-toaster.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-toaster.tsx
+var TOASTER_PLACEMENTS = [
+	"bottom-right",
+	"bottom-center",
+	"bottom-left",
+	"top-right",
+	"top-center"
+];
+var DEFAULT_MAX = 3;
+var MAX_LIMIT = 20;
+var DEFAULT_DURATION = 5e3;
+var DEFAULT_LABEL = "Notifications";
+var STACKED = "data-stacked";
+var OPEN = ":popover-open";
+/**
+* The corner of the window where notifications stack, newest nearest the edge, at most `max` at a time. It lives in
+* the top layer, so it shows over open dialogs, and its live region reads new toasts to screen readers. Pages
+* usually call `toast({ heading, text, tone })`, which finds or makes the page's toaster.
+*/
+var JlToaster = class extends JlElement {
+	static selector = "jl-toaster";
+	placement = this.useChange("bottom-right", (value) => this.reflect("placement", value), {
+		attribute: "placement",
+		parse: oneOf(TOASTER_PLACEMENTS, "bottom-right")
+	});
+	/** How many toasts show at once; older ones wait for newer ones to close. */
+	max = this.useChange(DEFAULT_MAX, () => this.renderStack(), {
+		attribute: "max",
+		parse: clampedNumber(DEFAULT_MAX, 1, MAX_LIMIT)
+	});
+	/** The region's name for screen readers. */
+	label = this.useChange(DEFAULT_LABEL, (value) => this._refs.region.setAttribute("aria-label", value), { attribute: "label" });
+	_watched = /* @__PURE__ */ new WeakSet();
+	_refs = this.useRefs((ref) => ({
+		region: ref(".region"),
+		slot: ref("slot")
+	}));
+	/** Shows a notification; `duration` is 5 seconds unless given, and it has a close button unless told not to. */
+	notify(options) {
+		const toast = /* @__PURE__ */ jsx(JlToast, {
+			heading: options.heading,
+			text: options.text,
+			tone: options.tone,
+			icon: options.icon,
+			duration: options.duration ?? DEFAULT_DURATION,
+			closable: options.closable ?? true,
+			actionLabel: options.actionLabel
+		});
+		const onAction = options.onAction;
+		if (onAction !== void 0) toast.addEventListener("action", () => onAction());
+		this.append(toast);
+		this.whenRendered(() => this.raise());
+		return { dismiss: () => toast.dismiss() };
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsx("section", {
+			class: "region",
+			popover: "manual",
+			"aria-live": "polite",
+			"aria-relevant": "additions text",
+			attrs: { part: "base" },
+			children: /* @__PURE__ */ jsx("slot", {})
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_toaster_default}`;
+	}
+	onConnect() {
+		this.renderStack();
+		this.on(this._refs.slot, "slotchange", () => this.renderStack());
+	}
+	onDisconnect() {
+		const region = this._refs.region;
+		if (region.matches(OPEN)) region.hidePopover();
+	}
+	toasts() {
+		return [...this.children].filter((child) => child instanceof JlToast && !child.hidden);
+	}
+	/** The newest `max` toasts show; the older ones wait. A dismissed toast leaves the toaster. */
+	renderStack() {
+		if (!this.isConnected) return;
+		const toasts = this.toasts();
+		const hiddenCount = Math.max(0, toasts.length - this.max.get());
+		for (const [index, toast] of toasts.entries()) {
+			toast.toggleAttribute(STACKED, index < hiddenCount);
+			this.watch(toast);
+		}
+		this.renderOpen(toasts.length > 0);
+	}
+	watch(toast) {
+		if (this._watched.has(toast)) return;
+		this._watched.add(toast);
+		toast.addEventListener("dismiss", () => toast.remove(), { once: true });
+	}
+	renderOpen(open) {
+		const region = this._refs.region;
+		if (open === region.matches(OPEN)) return;
+		if (open) {
+			region.showPopover();
+			return;
+		}
+		region.hidePopover();
+	}
+	/**
+	* Puts the toaster back on top of the top layer, above a dialog opened since it showed. Not while a toast holds
+	* the focus: hiding the region for a moment would drop it.
+	*/
+	raise() {
+		const region = this._refs.region;
+		if (!region.matches(OPEN)) {
+			this.renderStack();
+			return;
+		}
+		if (this.matches(":focus-within")) return;
+		region.hidePopover();
+		region.showPopover();
+	}
+};
+JlToaster.register();
+/** The page's toaster: the first one in the document, or a new one at the end of the body. */
+function pageToaster() {
+	const found = document.querySelector(JlToaster.selector);
+	if (found !== null) return found;
+	const toaster = new JlToaster();
+	document.body.append(toaster);
+	return toaster;
+}
+/**
+* Shows a notification in the page's toaster, made on first use: `toast({ heading: 'Saved', tone: 'ok' })`.
+* Returns a handle to close it early.
+*/
+function toast(options) {
+	return pageToaster().notify(options);
+}
+export { JlToaster, TOASTER_PLACEMENTS, toast };

package/dist/organisms/jl-tree.css_raw.js

@@ -0,0 +1,3 @@
+// src/organisms/jl-tree.css?raw
+var jl_tree_default = ":host {\n  display: block;\n  --indent: 16px;\n  --row-height: 30px;\n}\n\n.tree {\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n}\n\n.group {\n  position: relative;\n}\n\n/* A quiet line under each open folder, from its chevron down along its children. */\n.group::before {\n  position: absolute;\n  top: 0;\n  bottom: 4px;\n  left: calc(8px + var(--level) * var(--indent) + 6.5px);\n  width: 1px;\n  background: var(--jl-line);\n  content: \"\";\n}\n\n.item:focus-visible {\n  box-shadow: none;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--row-height);\n  padding: 0 8px 0 calc(8px + var(--level) * var(--indent));\n  border-radius: var(--jl-radius-sm);\n  cursor: pointer;\n  user-select: none;\n}\n\n.row:hover {\n  background: var(--jl-surface-2);\n  color: var(--jl-text);\n}\n\n.item:focus-visible > .row {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.item[aria-selected=\"true\"] > .row {\n  background: var(--jl-accent-soft);\n  color: var(--jl-text);\n  font-weight: 600;\n}\n\n.chevron {\n  display: inline-flex;\n  flex: none;\n  justify-content: center;\n  width: 14px;\n  color: var(--jl-faint);\n  transition: rotate var(--jl-fast) var(--jl-ease);\n}\n\n.item[aria-expanded=\"true\"] > .row > .chevron {\n  rotate: 90deg;\n}\n\n.icon {\n  color: var(--jl-muted);\n}\n\n.item[aria-selected=\"true\"] > .row > .icon {\n  color: var(--jl-accent);\n}\n\n.label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+export { jl_tree_default as default };

package/dist/organisms/jl-tree.d.ts

@@ -0,0 +1,59 @@
+import { JlElement } from '../base/jl-element';
+import type { TreeItem } from '../types/jl-tree.types';
+/**
+ * Nested items that open and close, as files in folders: `items` holds them, `expanded` lists the open folders and
+ * `value` is the selected item. The keyboard follows the tree pattern: Up and Down move, Right opens or enters a
+ * folder, Left closes it or goes to the parent, Home and End jump, Enter selects. Emits `select` and `toggle`.
+ */
+export declare class JlTree extends JlElement {
+    static readonly selector = "jl-tree";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        select: string;
+        toggle: {
+            id: string;
+            open: boolean;
+        };
+    }>>;
+    readonly items: Readonly<Readonly<{
+        get(): TreeItem[];
+        set(setter: TreeItem[] | ((prevState: TreeItem[]) => TreeItem[])): void;
+    }>>;
+    /** The ids of the open folders. */
+    readonly expanded: Readonly<Readonly<{
+        get(): string[];
+        set(setter: string[] | ((prevState: string[]) => string[])): void;
+    }>>;
+    /** The id of the selected item. */
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The tree's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _rows;
+    private readonly _focus;
+    private readonly _refs;
+    /** Opens or closes a folder, as a press on its chevron would. */
+    toggle(id: string, open: boolean): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private idOf;
+    /** A press selects the item; on a folder it also opens or closes it, and the chevron only does that. */
+    private press;
+    private handleKey;
+    private select;
+    private findItem;
+    /** One item takes the Tab stop: the focused one, else the selected one, else the first. */
+    private moveFocus;
+    private renderItems;
+    private itemNode;
+    private renderExpanded;
+    private isVisible;
+    /** The item itself when it shows, else the nearest folder around it that does: the focus goes there. */
+    private visibleAncestor;
+    private renderSelection;
+}