@syware/jlib 0.0.0-stage → 0.1.3

package/dist/lib/split.js

@@ -0,0 +1,37 @@
+// src/lib/split.ts
+var FULL = 100;
+var HALF = 50;
+/** How far one arrow press moves the divider, in percent; ten times that with Shift. */
+var KEY_STEP = 2;
+var LARGE_STEP = 10;
+var KEYS = {
+	horizontal: {
+		back: "ArrowLeft",
+		forward: "ArrowRight"
+	},
+	vertical: {
+		back: "ArrowUp",
+		forward: "ArrowDown"
+	}
+};
+/** The smallest share each pane keeps, in percent: never under 0 nor over half. */
+var clampMin = (min) => Math.min(HALF, Math.max(0, min));
+/** A divider position kept so that each pane keeps at least `min` percent. */
+var clampSplit = (position, min) => Math.min(FULL - clampMin(min), Math.max(clampMin(min), position));
+/** Where a pointer sits along the split, in percent of its length from its start; the middle when it has none. */
+var positionAt = (pointer, start, length) => length > 0 ? (pointer - start) / length * FULL : HALF;
+/**
+* Where a key moves the divider: arrows along the split by a step (a large one with Shift), Home and End to the
+* ends; null for any other key.
+*/
+function positionAfterKey(position, key, orientation, min, large = false) {
+	const step = large ? LARGE_STEP : KEY_STEP;
+	const next = (/* @__PURE__ */ new Map([
+		[KEYS[orientation].back, position - step],
+		[KEYS[orientation].forward, position + step],
+		["End", FULL],
+		["Home", 0]
+	])).get(key);
+	return next === void 0 ? null : clampSplit(next, min);
+}
+export { clampMin, clampSplit, positionAfterKey, positionAt };

package/dist/lib/surface.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether an event started on a control inside an interactive surface (a button in a card's footer, a switch at
+ * the end of a row), across shadow roots: the surface then leaves the press to that control.
+ */
+export declare function startedOnControl(event: Event, surface: Element): boolean;
+/** Whether a key activates a focused button-like surface, as Enter and Space do a native button. */
+export declare const isActivationKey: (event: KeyboardEvent) => boolean;

package/dist/lib/surface.js

@@ -0,0 +1,28 @@
+// src/lib/surface.ts
+var CONTROL_SELECTOR = [
+	"a[href]",
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"summary",
+	"label",
+	"[contenteditable=\"true\"]",
+	"[role=\"button\"]",
+	"[role=\"link\"]",
+	"[role=\"checkbox\"]",
+	"[role=\"switch\"]",
+	"[role=\"menuitem\"]"
+].join(", ");
+var ACTIVATION_KEYS = ["Enter", " "];
+/**
+* Whether an event started on a control inside an interactive surface (a button in a card's footer, a switch at
+* the end of a row), across shadow roots: the surface then leaves the press to that control.
+*/
+function startedOnControl(event, surface) {
+	const path = event.composedPath();
+	return path.slice(0, Math.max(0, path.indexOf(surface))).some((target) => target instanceof Element && target.matches(CONTROL_SELECTOR));
+}
+/** Whether a key activates a focused button-like surface, as Enter and Space do a native button. */
+var isActivationKey = (event) => ACTIVATION_KEYS.includes(event.key);
+export { isActivationKey, startedOnControl };

package/dist/lib/table.d.ts

@@ -0,0 +1,30 @@
+import type { TableAlign, TableCellFormat, TableColumn, TableRow, TableRowKey, TableSelectionState, TableSortDirection } from '../types/jl-table.types';
+export declare const nextSortDirection: (direction: TableSortDirection) => TableSortDirection;
+/** A cell's value as a number, `NaN` when it is not one. */
+export declare function toNumber(value: unknown): number;
+/** A cell's value as a time in milliseconds: a `Date`, a timestamp, or a date string; `NaN` otherwise. */
+export declare function toTime(value: unknown): number;
+/**
+ * Orders two cell values ascending: numbers by value, dates by time, text with `localeCompare`. Empty and
+ * unreadable values come after the others.
+ */
+export declare function compareCells(a: unknown, b: unknown, format: TableCellFormat, locale?: string): number;
+/**
+ * The rows ordered by one column; `none` gives them back as they came. The sort is stable, and empty values stay
+ * at the end in both directions.
+ */
+export declare function sortRows(rows: readonly TableRow[], key: string, direction: TableSortDirection, format?: TableCellFormat, locale?: string): TableRow[];
+/** A cell's text in its column's format; empty for a missing value. */
+export declare function formatCell(value: unknown, format?: TableCellFormat, locale?: string): string;
+/** Where a column's cells align: as asked, otherwise numbers right and the rest left. */
+export declare function columnAlign(column: TableColumn): TableAlign;
+/** A CSS width from a column's `width`: numbers are pixels. */
+export declare function columnWidth(width: string | number | undefined): string;
+/** A row's identity, read from its key field; its position when the field is missing. */
+export declare function rowKeyOf(row: TableRow, keyField: string, index: number): TableRowKey;
+/** What the select-all box shows: empty, a dash for some rows, a tick for all of them. */
+export declare function selectionState(keys: readonly TableRowKey[], selected: ReadonlySet<TableRowKey>): TableSelectionState;
+/** The selection after the select-all box is pressed: every row when not all were selected, else none of them. */
+export declare function toggleAll(keys: readonly TableRowKey[], selected: ReadonlySet<TableRowKey>): TableRowKey[];
+/** The selection with one row added or taken out. */
+export declare function toggleKey(selected: readonly TableRowKey[], key: TableRowKey, on: boolean): TableRowKey[];

package/dist/lib/table.js

@@ -0,0 +1,110 @@
+// src/lib/table.ts
+/** What a header press does to a column's order: ascending, then descending, then as the rows came. */
+var NEXT_DIRECTION = {
+	asc: "desc",
+	desc: "none",
+	none: "asc"
+};
+var DIRECTION_SIGN = {
+	asc: 1,
+	desc: -1,
+	none: 0
+};
+var DATE_FORMAT = { dateStyle: "medium" };
+var nextSortDirection = (direction) => NEXT_DIRECTION[direction];
+var isEmpty = (value) => value === null || value === void 0 || value === "";
+/** A cell's value as a number, `NaN` when it is not one. */
+function toNumber(value) {
+	if (typeof value === "number") return value;
+	if (typeof value === "string" && value.trim() !== "") return Number(value);
+	return NaN;
+}
+/** A cell's value as a time in milliseconds: a `Date`, a timestamp, or a date string; `NaN` otherwise. */
+function toTime(value) {
+	if (value instanceof Date) return value.getTime();
+	if (typeof value === "number") return value;
+	if (typeof value === "string" && value.trim() !== "") return Date.parse(value);
+	return NaN;
+}
+var compareNumbers = (a, b) => a - b;
+var COMPARERS = {
+	badge: (a, b, locale) => String(a).localeCompare(String(b), locale),
+	code: (a, b, locale) => String(a).localeCompare(String(b), locale),
+	date: (a, b) => compareNumbers(toTime(a), toTime(b)),
+	number: (a, b) => compareNumbers(toNumber(a), toNumber(b)),
+	text: (a, b, locale) => String(a).localeCompare(String(b), locale, { numeric: true })
+};
+/** Whether a value cannot be ordered in the format: empty, or not a number or a date where one is expected. */
+function isUnorderable(value, format) {
+	if (isEmpty(value)) return true;
+	return {
+		badge: () => false,
+		code: () => false,
+		date: () => Number.isNaN(toTime(value)),
+		number: () => Number.isNaN(toNumber(value)),
+		text: () => false
+	}[format]();
+}
+/**
+* The rows ordered by one column; `none` gives them back as they came. The sort is stable, and empty values stay
+* at the end in both directions.
+*/
+function sortRows(rows, key, direction, format = "text", locale) {
+	const sign = DIRECTION_SIGN[direction];
+	if (sign === 0 || key === "") return [...rows];
+	return [...rows].sort((a, b) => {
+		const aMissing = isUnorderable(a[key], format);
+		const bMissing = isUnorderable(b[key], format);
+		if (aMissing || bMissing) return Number(aMissing) - Number(bMissing);
+		return sign * COMPARERS[format](a[key], b[key], locale);
+	});
+}
+var FORMATTERS = {
+	badge: (value) => String(value),
+	code: (value) => String(value),
+	date: (value, locale) => {
+		const time = toTime(value);
+		return Number.isNaN(time) ? String(value) : new Intl.DateTimeFormat(locale, DATE_FORMAT).format(time);
+	},
+	number: (value, locale) => {
+		const number = toNumber(value);
+		return Number.isNaN(number) ? String(value) : new Intl.NumberFormat(locale).format(number);
+	},
+	text: (value) => String(value)
+};
+/** A cell's text in its column's format; empty for a missing value. */
+function formatCell(value, format = "text", locale) {
+	if (isEmpty(value)) return "";
+	return FORMATTERS[format](value, locale);
+}
+/** Where a column's cells align: as asked, otherwise numbers right and the rest left. */
+function columnAlign(column) {
+	return column.align ?? (column.format === "number" ? "right" : "left");
+}
+/** A CSS width from a column's `width`: numbers are pixels. */
+function columnWidth(width) {
+	if (width === void 0) return "";
+	return typeof width === "number" ? `${width}px` : width;
+}
+/** A row's identity, read from its key field; its position when the field is missing. */
+function rowKeyOf(row, keyField, index) {
+	const value = row[keyField];
+	return typeof value === "string" || typeof value === "number" ? value : index;
+}
+/** What the select-all box shows: empty, a dash for some rows, a tick for all of them. */
+function selectionState(keys, selected) {
+	const count = keys.filter((key) => selected.has(key)).length;
+	if (count === 0) return "none";
+	return count === keys.length ? "all" : "some";
+}
+/** The selection after the select-all box is pressed: every row when not all were selected, else none of them. */
+function toggleAll(keys, selected) {
+	const others = [...selected].filter((key) => !keys.includes(key));
+	return selectionState(keys, selected) === "all" ? others : [...others, ...keys];
+}
+/** The selection with one row added or taken out. */
+function toggleKey(selected, key, on) {
+	const without = selected.filter((candidate) => candidate !== key);
+	return on ? [...without, key] : without;
+}
+export { columnAlign, columnWidth, formatCell, nextSortDirection, rowKeyOf, selectionState, sortRows, toNumber, toTime, toggleAll, toggleKey };

package/dist/lib/tags.d.ts

@@ -0,0 +1,14 @@
+/** The tags in a text: `"a, b,,c"` gives `["a", "b", "c"]`. */
+export declare const splitTags: (text: string) => string[];
+/** Whether a text holds a separator, so that it adds several tags rather than being typed as one. */
+export declare const hasTagSeparator: (text: string) => boolean;
+/** Whether the list already holds the tag, whatever its case. */
+export declare const hasTag: (tags: readonly string[], tag: string) => boolean;
+/**
+ * Adds tags to a list: blanks are dropped, a tag already there (whatever its case) is a duplicate, and nothing is
+ * added past `max` tags (0: no limit). Gives the new list and the duplicates met, so the field can point at them.
+ */
+export declare function addTags(tags: readonly string[], candidates: readonly string[], max: number): {
+    tags: string[];
+    duplicates: string[];
+};

package/dist/lib/tags.js

@@ -0,0 +1,29 @@
+// src/lib/tags.ts
+var TAG_SEPARATORS = /[,\n\r\t]/;
+/** The tags in a text: `"a, b,,c"` gives `["a", "b", "c"]`. */
+var splitTags = (text) => text.split(TAG_SEPARATORS).map((tag) => tag.trim()).filter((tag) => tag !== "");
+/** Whether a text holds a separator, so that it adds several tags rather than being typed as one. */
+var hasTagSeparator = (text) => TAG_SEPARATORS.test(text);
+var sameTag = (a, b) => a.toLocaleLowerCase() === b.toLocaleLowerCase();
+/** Whether the list already holds the tag, whatever its case. */
+var hasTag = (tags, tag) => tags.some((existing) => sameTag(existing, tag));
+/**
+* Adds tags to a list: blanks are dropped, a tag already there (whatever its case) is a duplicate, and nothing is
+* added past `max` tags (0: no limit). Gives the new list and the duplicates met, so the field can point at them.
+*/
+function addTags(tags, candidates, max) {
+	const result = {
+		duplicates: [],
+		tags: [...tags]
+	};
+	for (const candidate of candidates.map((tag) => tag.trim()).filter((tag) => tag !== "")) {
+		if (hasTag(result.tags, candidate)) {
+			result.duplicates.push(candidate);
+			continue;
+		}
+		if (max > 0 && result.tags.length >= max) break;
+		result.tags.push(candidate);
+	}
+	return result;
+}
+export { addTags, hasTag, hasTagSeparator, splitTags };

package/dist/lib/text.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Removes the indentation every line shares, and the blank lines around the text: code written indented inside
+ * an HTML element reads as it was meant.
+ */
+export declare function dedent(text: string): string;

package/dist/lib/text.js

@@ -0,0 +1,13 @@
+// src/lib/text.ts
+var LEADING_SPACE = /^[ \t]*/;
+/**
+* Removes the indentation every line shares, and the blank lines around the text: code written indented inside
+* an HTML element reads as it was meant.
+*/
+function dedent(text) {
+	const lines = text.replace(/^\s*\n/, "").trimEnd().split("\n");
+	const indents = lines.filter((line) => line.trim() !== "").map((line) => LEADING_SPACE.exec(line)?.[0].length ?? 0);
+	const shared = indents.length === 0 ? 0 : Math.min(...indents);
+	return lines.map((line) => line.slice(shared)).join("\n");
+}
+export { dedent };

package/dist/lib/tokens.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Gives the document the design tokens, once. They live in the `jlib` cascade layer, so the page overrides any of
+ * them with a plain rule: `:root { --jl-accent: #7c3aed; }`.
+ */
+export declare function adoptTokens(): void;

package/dist/lib/tokens.js

@@ -0,0 +1,15 @@
+import { TOKEN_STYLES } from "../styles/shared.js";
+// src/lib/tokens.ts
+var adopted = { sheet: null };
+/**
+* Gives the document the design tokens, once. They live in the `jlib` cascade layer, so the page overrides any of
+* them with a plain rule: `:root { --jl-accent: #7c3aed; }`.
+*/
+function adoptTokens() {
+	if (adopted.sheet !== null || typeof document === "undefined") return;
+	const sheet = new CSSStyleSheet();
+	sheet.replaceSync(TOKEN_STYLES);
+	document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+	adopted.sheet = sheet;
+}
+export { adoptTokens };

package/dist/lib/tree.d.ts

@@ -0,0 +1,16 @@
+import type { TreeAction, TreeItem, VisibleTreeItem } from '../types/jl-tree.types';
+/** An item with `children`, even empty, is a folder. */
+export declare const isFolder: (item: TreeItem) => boolean;
+/** The items a person sees, in order: the roots, and the children of every open folder, with their depth. */
+export declare function visibleItems(items: readonly TreeItem[], expanded: ReadonlySet<string>, level?: number, parent?: string | null): VisibleTreeItem[];
+/** Every item of the tree with its parent, open or not. */
+export declare function allItems(items: readonly TreeItem[], level?: number, parent?: string | null): VisibleTreeItem[];
+/** The ids of the folders around an item, from the root down: open them to show it. */
+export declare function ancestorsOf(items: readonly TreeItem[], id: string): string[];
+/** The open folders after one is opened or closed. */
+export declare function withExpanded(expanded: readonly string[], id: string, open: boolean): string[];
+/**
+ * What a key does on the focused item, by the tree pattern: Up and Down move, Right opens or enters, Left closes
+ * or goes to the parent, Home and End jump, Enter and Space select. `null` for a key the tree leaves alone.
+ */
+export declare function treeKeyAction(items: readonly TreeItem[], expanded: ReadonlySet<string>, focused: string, key: string): TreeAction | null;

package/dist/lib/tree.js

@@ -0,0 +1,89 @@
+// src/lib/tree.ts
+/** An item with `children`, even empty, is a folder. */
+var isFolder = (item) => Array.isArray(item.children);
+/** The items a person sees, in order: the roots, and the children of every open folder, with their depth. */
+function visibleItems(items, expanded, level = 1, parent = null) {
+	return items.flatMap((item) => {
+		const own = {
+			item,
+			level,
+			parent
+		};
+		if (!(isFolder(item) && expanded.has(item.id))) return [own];
+		return [own, ...visibleItems(item.children ?? [], expanded, level + 1, item.id)];
+	});
+}
+/** Every item of the tree with its parent, open or not. */
+function allItems(items, level = 1, parent = null) {
+	return items.flatMap((item) => [{
+		item,
+		level,
+		parent
+	}, ...allItems(item.children ?? [], level + 1, item.id)]);
+}
+/** The open folders after one is opened or closed. */
+function withExpanded(expanded, id, open) {
+	const others = expanded.filter((candidate) => candidate !== id);
+	return open ? [...others, id] : others;
+}
+var focusAt = (visible, index) => {
+	const target = visible[index];
+	return target === void 0 ? null : {
+		id: target.item.id,
+		kind: "focus"
+	};
+};
+/** Right: opens a closed folder, enters an open one; nothing on a file. */
+function moveRight(visible, index, expanded) {
+	const current = visible[index];
+	if (current === void 0 || !isFolder(current.item)) return null;
+	if (!expanded.has(current.item.id)) return {
+		id: current.item.id,
+		kind: "toggle",
+		open: true
+	};
+	return visible[index + 1]?.parent === current.item.id ? focusAt(visible, index + 1) : null;
+}
+/** Left: closes an open folder, otherwise goes to the parent. */
+function moveLeft(visible, index, expanded) {
+	const current = visible[index];
+	if (current === void 0) return null;
+	if (isFolder(current.item) && expanded.has(current.item.id)) return {
+		id: current.item.id,
+		kind: "toggle",
+		open: false
+	};
+	return current.parent === null ? null : {
+		id: current.parent,
+		kind: "focus"
+	};
+}
+var selectAt = (visible, index) => {
+	const current = visible[index];
+	return current === void 0 ? null : {
+		id: current.item.id,
+		kind: "select"
+	};
+};
+var KEY_HANDLERS = /* @__PURE__ */ new Map([
+	[" ", selectAt],
+	["ArrowDown", (visible, index) => focusAt(visible, index + 1)],
+	["ArrowLeft", moveLeft],
+	["ArrowRight", moveRight],
+	["ArrowUp", (visible, index) => focusAt(visible, index - 1)],
+	["End", (visible) => focusAt(visible, visible.length - 1)],
+	["Enter", selectAt],
+	["Home", (visible) => focusAt(visible, 0)]
+]);
+/**
+* What a key does on the focused item, by the tree pattern: Up and Down move, Right opens or enters, Left closes
+* or goes to the parent, Home and End jump, Enter and Space select. `null` for a key the tree leaves alone.
+*/
+function treeKeyAction(items, expanded, focused, key) {
+	const handler = KEY_HANDLERS.get(key);
+	if (handler === void 0) return null;
+	const visible = visibleItems(items, expanded);
+	const index = visible.findIndex((entry) => entry.item.id === focused);
+	return handler(visible, Math.max(0, index), expanded);
+}
+export { allItems, isFolder, treeKeyAction, visibleItems, withExpanded };

package/dist/lib/trend.d.ts

@@ -0,0 +1,3 @@
+import type { StatTrend } from '../types/jl-stat.types';
+/** Which way a delta written as text went: a plus is up, a minus is down, zero or no sign is flat. */
+export declare function trendOfDelta(delta: string): StatTrend;

package/dist/lib/trend.js

@@ -0,0 +1,15 @@
+// src/lib/trend.ts
+var MINUS_SIGN = "−";
+var SIGNED_NUMBER = /^\s*([+\-−])?\D*([\d.,]+)?/;
+var SIGN_TRENDS = {
+	"-": "down",
+	"+": "up",
+	[MINUS_SIGN]: "down"
+};
+/** Which way a delta written as text went: a plus is up, a minus is down, zero or no sign is flat. */
+function trendOfDelta(delta) {
+	const [, sign = "", digits = ""] = SIGNED_NUMBER.exec(delta) ?? [];
+	if (Number.parseFloat(digits.replace(/,/g, "")) === 0) return "flat";
+	return SIGN_TRENDS[sign] ?? "flat";
+}
+export { trendOfDelta };

package/dist/lib/trigger.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The element that carries a trigger's accessible state: the inner `base` part of a component (where its focus
+ * and its name are), or else the element itself.
+ */
+export declare function accessibleTarget(element: Element): Element;
+/** Sets an ARIA attribute on a trigger, where screen readers read it; `null` removes it. */
+export declare function setTriggerAria(element: Element, name: string, value: string | null): void;
+/** The element that has the focus within a document or a shadow root, looking inside nested shadow roots. */
+export declare function deepActiveElement(root: DocumentOrShadowRoot): Element | null;
+/** The first control people can focus among some elements and everything inside them, in document order. */
+export declare function firstFocusable(elements: readonly Element[]): HTMLElement | null;

package/dist/lib/trigger.js

@@ -0,0 +1,34 @@
+// src/lib/trigger.ts
+var NATIVE_FOCUSABLE = "a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]";
+var BASE_PART = "[part~=\"base\"]";
+/**
+* The element that carries a trigger's accessible state: the inner `base` part of a component (where its focus
+* and its name are), or else the element itself.
+*/
+function accessibleTarget(element) {
+	return element.shadowRoot?.querySelector(BASE_PART) ?? element;
+}
+/** Sets an ARIA attribute on a trigger, where screen readers read it; `null` removes it. */
+function setTriggerAria(element, name, value) {
+	const target = accessibleTarget(element);
+	if (value === null) {
+		target.removeAttribute(name);
+		return;
+	}
+	target.setAttribute(name, value);
+}
+/** The element that has the focus within a document or a shadow root, looking inside nested shadow roots. */
+function deepActiveElement(root) {
+	const active = root.activeElement;
+	const inner = active?.shadowRoot ?? null;
+	if (inner === null || inner.activeElement === null) return active;
+	return deepActiveElement(inner);
+}
+/** A form-associated custom element (jl-input, jl-button…) is a control: its own `focus()` reaches its inside. */
+var isFormComponent = (element) => element.constructor.formAssociated === true;
+var canFocus = (element) => element instanceof HTMLElement && (element.matches(NATIVE_FOCUSABLE) || isFormComponent(element)) && !element.matches(":disabled") && element.checkVisibility();
+/** The first control people can focus among some elements and everything inside them, in document order. */
+function firstFocusable(elements) {
+	return elements.flatMap((element) => [element, ...element.querySelectorAll("*")]).find(canFocus) ?? null;
+}
+export { accessibleTarget, deepActiveElement, firstFocusable, setTriggerAria };

package/dist/molecules/jl-accordion-item.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-accordion-item.css?raw
+var jl_accordion_item_default = ":host {\n  display: block;\n  border-bottom: 1px solid var(--jl-line);\n  /* Lets the content's height animate from 0 to auto. */\n  interpolate-size: allow-keywords;\n  --pad-x: 0px;\n}\n\nsummary {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 48px;\n  padding: 12px var(--pad-x);\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  font-weight: 600;\n  line-height: 1.4;\n  list-style: none;\n  cursor: pointer;\n  user-select: none;\n}\n\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n.heading {\n  flex: 1;\n  min-width: 0;\n}\n\n.icon {\n  color: var(--jl-muted);\n}\n\n.chevron {\n  color: var(--jl-faint);\n  transition: rotate var(--jl-slow) var(--jl-ease);\n}\n\nsummary:hover .chevron {\n  color: var(--jl-text);\n}\n\ndetails[open] .chevron {\n  rotate: 180deg;\n}\n\nsummary:focus-visible {\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jl-brand) 60%, transparent);\n}\n\n/*\n * The content box is a pseudo-element BASE_STYLES' \"* { box-sizing: inherit }\" does not reach: without this, what\n * it holds (and the slotted fields, which inherit through it) would fall back to content-box.\n */\ndetails::details-content {\n  box-sizing: inherit;\n  block-size: 0;\n  overflow: clip;\n  transition:\n    block-size var(--jl-slow) var(--jl-ease),\n    content-visibility var(--jl-slow) allow-discrete;\n}\n\ndetails[open]::details-content {\n  block-size: auto;\n}\n\n.content {\n  padding: 0 var(--pad-x) 16px;\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n  line-height: 1.6;\n}\n\n:host([disabled]) summary {\n  color: var(--jl-faint);\n  cursor: not-allowed;\n}\n\n:host([disabled]) summary:hover .chevron {\n  color: var(--jl-faint);\n}\n";
+export { jl_accordion_item_default as default };

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

@@ -0,0 +1,34 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * A section that opens and closes under its heading, on the browser's own `<details>`. Alone it is a disclosure;
+ * in a `jl-accordion` it is one of a list. `toggle` fires with the new state.
+ */
+export declare class JlAccordionItem extends JlElement {
+    static readonly selector = "jl-accordion-item";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        toggle: boolean;
+    }>>;
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly open: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** An icon before the heading. */
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Cannot be opened or closed by people. */
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private renderOpen;
+}

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

@@ -0,0 +1,82 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import jl_accordion_item_default from "./jl-accordion-item.css_raw.js";
+import { css } from "@jadis/core";
+import { ChevronDown } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-accordion-item.tsx
+registerIcons({ "chevron-down": ChevronDown });
+var ICON_SIZE = 16;
+/**
+* A section that opens and closes under its heading, on the browser's own `<details>`. Alone it is a disclosure;
+* in a `jl-accordion` it is one of a list. `toggle` fires with the new state.
+*/
+var JlAccordionItem = class extends JlElement {
+	static selector = "jl-accordion-item";
+	events = this.useEvents();
+	heading = this.useChange("", (value) => {
+		this._refs.heading.textContent = value;
+	}, { attribute: "heading" });
+	open = this.useChange(false, (value) => this.renderOpen(value), { attribute: "open" });
+	/** An icon before the heading. */
+	icon = this.useChange("", (name) => {
+		this._refs.icon.name.set(name);
+		this._refs.icon.hidden = name === "";
+	}, { attribute: "icon" });
+	/** Cannot be opened or closed by people. */
+	disabled = this.useChange(false, (value) => {
+		this.reflect("disabled", value);
+		this._refs.summary.toggleAttribute("aria-disabled", value);
+		this._refs.summary.tabIndex = value ? -1 : 0;
+	}, { attribute: "disabled" });
+	_refs = this.useRefs((ref) => ({
+		details: ref("details"),
+		heading: ref(".heading"),
+		icon: ref(".icon"),
+		summary: ref("summary")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("details", {
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("summary", { children: [
+				/* @__PURE__ */ jsx(JlIcon, {
+					class: "icon",
+					size: ICON_SIZE,
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("span", { class: "heading" }),
+				/* @__PURE__ */ jsx(JlIcon, {
+					class: "chevron",
+					name: "chevron-down",
+					size: ICON_SIZE
+				})
+			] }), /* @__PURE__ */ jsx("div", {
+				class: "content",
+				children: /* @__PURE__ */ jsx("slot", {})
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_accordion_item_default}`;
+	}
+	onConnect() {
+		const details = this._refs.details;
+		this.on(this._refs.summary, "click", (event) => {
+			if (this.disabled.get()) event.preventDefault();
+		});
+		this.on(details, "toggle", (event) => {
+			const { oldState, newState } = event;
+			if (oldState === newState) return;
+			if (details.open !== this.open.get()) this.open.set(details.open);
+			this.events.emit("toggle", details.open);
+		});
+	}
+	renderOpen(open) {
+		this.reflect("open", open);
+		this._refs.details.open = open;
+	}
+};
+JlAccordionItem.register();
+export { JlAccordionItem };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-accordion.css?raw
+var jl_accordion_default = ":host {\n  display: block;\n}\n\n:host([variant=\"bordered\"]) .accordion {\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface);\n}\n\n:host([variant=\"bordered\"]) ::slotted(*) {\n  --pad-x: 16px;\n}\n\n:host([variant=\"bordered\"]) ::slotted(:last-child) {\n  border-bottom: none;\n}\n";
+export { jl_accordion_default as default };

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

@@ -0,0 +1,27 @@
+import { JlElement } from '../base/jl-element';
+import type { AccordionVariant } from '../types/jl-accordion.types';
+export declare const ACCORDION_VARIANTS: readonly AccordionVariant[];
+/**
+ * A list of `jl-accordion-item`s. One item opens at a time (opening one closes the others) unless `multiple` is
+ * set. `bordered` puts the items in a box with lines between them.
+ */
+export declare class JlAccordion extends JlElement {
+    static readonly selector = "jl-accordion";
+    /** Lets several items stay open together. */
+    readonly multiple: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly variant: Readonly<Readonly<{
+        get(): AccordionVariant;
+        set(setter: ((prevState: AccordionVariant) => AccordionVariant) | AccordionVariant): void;
+    }>>;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private items;
+    private onToggle;
+    /** Without `multiple`, only the first open item stays open. */
+    private keepOneOpen;
+    private closeAllBut;
+}