@syware/jlib 0.0.0-stage → 0.1.3

package/dist/molecules/jl-tag-input.js

@@ -0,0 +1,429 @@
+import { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { clampedNumber, jsonOf, oneOf } from "../lib/attributes.js";
+import { followAnchor } from "../lib/floating.js";
+import { registerIcons } from "../lib/icons.js";
+import { CONTROL_SIZES } from "../lib/options.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { keepInView } from "../lib/keep-in-view.js";
+import { filterOptions, matchParts, nextEnabledIndex } from "../lib/option-filter.js";
+import { addTags, hasTag, hasTagSeparator, splitTags } from "../lib/tags.js";
+import jl_tag_input_default from "./jl-tag-input.css_raw.js";
+import { css } from "@jadis/core";
+import { X } from "lucide";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-tag-input.tsx
+registerIcons({ x: X });
+var REMOVE_ICON_SIZE = 12;
+var NONE = -1;
+var PLACEMENT = "bottom-start";
+var VALUE_MISSING = "Add at least one tag.";
+var NO_LIMIT = 0;
+var COMMA = ",";
+var MAX_SUGGESTIONS = 8;
+var FLASH_MS = 600;
+/** A JSON attribute that should hold a list of texts; anything else gives an empty list. */
+var parseTextList = (value) => {
+	const parsed = jsonOf([])(value);
+	return Array.isArray(parsed) ? parsed.map(String) : [];
+};
+var highlighted = (label, query) => matchParts(label, query).map((part) => part.matched ? /* @__PURE__ */ jsx("mark", { children: part.text }) : part.text);
+/**
+* A field that collects short texts as chips: Enter or a comma adds what was typed, Backspace in the empty field
+* removes the last chip, a pasted list adds each of its items. The form gets each tag under the field's name.
+*/
+var JlTagInput = class extends JlFormControl {
+	static selector = "jl-tag-input";
+	events = this.useEvents();
+	value = this.useChange([], () => this.renderTags(), {
+		attribute: "value",
+		parse: parseTextList
+	});
+	placeholder = this.useChange("", () => this.renderPlaceholder(), { attribute: "placeholder" });
+	/** The field's name for screen readers, when no visible label names it. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.native, "aria-label", value), { attribute: "label" });
+	/** The most tags the field takes; 0 for no limit. */
+	max = this.useChange(NO_LIMIT, () => this.renderTags(), {
+		attribute: "max",
+		parse: clampedNumber(NO_LIMIT, 0, Number.MAX_SAFE_INTEGER)
+	});
+	/** Tags offered in a list while people type. */
+	suggestions = this.useChange([], (value) => this.renderSuggestionRole(value), {
+		attribute: "suggestions",
+		parse: parseTextList
+	});
+	required = this.useChange(false, (value) => {
+		this._refs.native.toggleAttribute("aria-required", value);
+		this.reflect("required", value);
+		this.renderValidity();
+	}, { attribute: "required" });
+	disabled = this.useChange(false, (value) => this.renderDisabled(value), { attribute: "disabled" });
+	/** Draws the field in the danger colour, for an error the page found itself. */
+	invalid = this.useChange(false, (value) => {
+		this.reflect("invalid", value);
+		this._refs.native.toggleAttribute("aria-invalid", value);
+	}, { attribute: "invalid" });
+	size = this.useChange("md", (value) => this.reflect("size", value), {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	_listId = uniqueId("jl-tag-input-list");
+	_state = {
+		active: NONE,
+		matches: [],
+		opening: new AbortController()
+	};
+	_nameWatch = new MutationObserver(() => this.renderFormValue());
+	_refs = this.useRefs((ref) => ({
+		control: ref(".control"),
+		listbox: ref(".listbox"),
+		native: ref("input"),
+		popup: ref(".popup"),
+		status: ref(".status"),
+		tags: ref(".tags")
+	}));
+	focus(options) {
+		this._refs.native.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				class: "control",
+				attrs: { part: "base" },
+				children: [/* @__PURE__ */ jsx("ul", {
+					class: "tags",
+					role: "list"
+				}), /* @__PURE__ */ jsx("input", {
+					class: "native",
+					autocomplete: "off"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				class: "floating panel popup",
+				popover: "manual",
+				attrs: { part: "list" },
+				children: /* @__PURE__ */ jsx("div", {
+					class: "listbox",
+					role: "listbox",
+					id: this._listId
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				class: "status sr-only",
+				role: "status"
+			})
+		] });
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${CONTROL_STYLES}${FLOATING_STYLES}${jl_tag_input_default}`;
+	}
+	onConnect() {
+		const native = this._refs.native;
+		this._nameWatch.observe(this, {
+			attributeFilter: ["name"],
+			attributes: true
+		});
+		this.renderFormValue();
+		this.on(native, "input", (event) => {
+			event.stopPropagation();
+			this.onType();
+		});
+		this.on(native, "keydown", (event) => this.onFieldKey(event));
+		this.on(native, "paste", (event) => this.onPaste(event));
+		this.on(native, "blur", () => this.commitText());
+		this.on(this._refs.control, "click", (event) => this.onControlClick(event));
+		this.on(this._refs.tags, "keydown", (event) => this.onTagKey(event));
+		this.on(this._refs.popup, "mousedown", (event) => event.preventDefault());
+		this.on(this._refs.listbox, "click", (event) => this.pick(this.suggestionAt(event)));
+	}
+	onDisconnect() {
+		this._nameWatch.disconnect();
+		this._state.opening.abort();
+	}
+	resetValue() {
+		this._refs.native.value = "";
+		this.value.set(parseTextList(this.getAttribute("value")));
+	}
+	setDisabledByForm(disabled) {
+		this.whenRendered(() => {
+			this._refs.native.disabled = disabled || this.disabled.get();
+		});
+	}
+	onType() {
+		const native = this._refs.native;
+		if (hasTagSeparator(native.value)) {
+			this.add(splitTags(native.value));
+			return;
+		}
+		this.renderMatches();
+	}
+	onFieldKey(event) {
+		if ((/* @__PURE__ */ new Map([
+			[COMMA, () => {
+				this.commitText();
+				return true;
+			}],
+			["ArrowDown", () => this.moveActive(1)],
+			["ArrowLeft", () => this.focusLastTag()],
+			["ArrowUp", () => this.moveActive(-1)],
+			["Backspace", () => this.removeLastIfEmpty()],
+			["Enter", () => this.onEnter()],
+			["Escape", () => this.closeList()]
+		])).get(event.key)?.() === true) event.preventDefault();
+	}
+	/** Enter adds the suggestion the arrows reached, or the typed text; in an empty field it submits the form. */
+	onEnter() {
+		const active = this._state.matches[this._state.active];
+		if (this.isOpen() && active !== void 0) {
+			this.pick(active);
+			return true;
+		}
+		return this.commitText();
+	}
+	/** A pasted list adds each of its items; a single word is pasted as text. */
+	onPaste(event) {
+		const pasted = event.clipboardData?.getData("text") ?? "";
+		if (!hasTagSeparator(pasted)) return;
+		event.preventDefault();
+		const native = this._refs.native;
+		const before = native.value.slice(0, native.selectionStart ?? native.value.length);
+		const after = native.value.slice(native.selectionEnd ?? native.value.length);
+		this.add(splitTags(`${before}${pasted}${after}`));
+	}
+	onControlClick(event) {
+		const remove = event.target.closest(".tag-remove");
+		if (remove !== null) {
+			this.removeAt(Number(remove.dataset.index));
+			this.focus();
+			return;
+		}
+		if (event.target === this._refs.control) this.focus();
+	}
+	/** On a chip's remove button: arrows move between chips and back to the field, Backspace or Delete removes it. */
+	onTagKey(event) {
+		const button = event.target.closest(".tag-remove");
+		if (button === null) return;
+		const index = Number(button.dataset.index);
+		const handler = (/* @__PURE__ */ new Map([
+			["ArrowLeft", () => this.focusTag(Math.max(0, index - 1))],
+			["ArrowRight", () => this.focusTag(index + 1)],
+			["Backspace", () => this.removeAndFocus(index)],
+			["Delete", () => this.removeAndFocus(index)]
+		])).get(event.key);
+		if (handler !== void 0) {
+			event.preventDefault();
+			handler();
+		}
+	}
+	/** Adds the typed text as tags; true when there was text to add. */
+	commitText() {
+		const text = this._refs.native.value;
+		this.closeList();
+		if (text.trim() === "") return false;
+		this.add(splitTags(text));
+		return true;
+	}
+	add(candidates) {
+		const before = this.value.get();
+		const result = addTags(before, candidates, this.max.get());
+		const added = result.tags.slice(before.length);
+		if (!(added.length === 0 && result.duplicates.length === 0)) this._refs.native.value = "";
+		this.closeList();
+		if (added.length > 0) {
+			this.value.set(result.tags);
+			this.announce(`Added ${added.join(", ")}`);
+			this.events.emit("change", result.tags);
+		}
+		this.flash(result.duplicates);
+	}
+	removeAt(index) {
+		const tags = this.value.get();
+		const removed = tags[index];
+		if (removed === void 0 || this.disabled.get()) return;
+		const next = tags.filter((_, position) => position !== index);
+		this.value.set(next);
+		this.announce(`Removed ${removed}`);
+		this.events.emit("change", next);
+	}
+	removeAndFocus(index) {
+		this.removeAt(index);
+		if (this.value.get().length === 0) {
+			this.focus();
+			return;
+		}
+		this.focusTag(Math.max(0, index - 1));
+	}
+	removeLastIfEmpty() {
+		if (this._refs.native.value !== "" || this.value.get().length === 0) return false;
+		this.removeAt(this.value.get().length - 1);
+		return true;
+	}
+	focusLastTag() {
+		const native = this._refs.native;
+		const count = this.value.get().length;
+		if (native.selectionStart !== 0 || native.selectionEnd !== 0 || count === 0 || this.disabled.get()) return false;
+		this.focusTag(count - 1);
+		return true;
+	}
+	/** Focuses a chip's remove button; past the last chip, the field. */
+	focusTag(index) {
+		const button = this._refs.tags.querySelector(`.tag-remove[data-index="${index}"]`);
+		if (button === null) {
+			this.focus();
+			return;
+		}
+		button.focus();
+	}
+	/** Points at the chips people tried to add again. */
+	flash(duplicates) {
+		const tags = this.value.get();
+		for (const chip of this._refs.tags.querySelectorAll(".tag")) {
+			const tag = tags[Number(chip.dataset.index)];
+			if (tag === void 0 || !hasTag(duplicates, tag)) continue;
+			chip.classList.add("flash");
+			window.setTimeout(() => chip.classList.remove("flash"), FLASH_MS);
+		}
+	}
+	announce(message) {
+		this._refs.status.textContent = message;
+	}
+	isOpen() {
+		return this._refs.popup.matches(":popover-open");
+	}
+	/** The suggestions that match the typed text and are not tags yet; the list opens while there are some. */
+	renderMatches() {
+		const query = this._refs.native.value.trim();
+		const tags = this.value.get();
+		const candidates = this.suggestions.get().filter((suggestion) => !hasTag(tags, suggestion)).map((label) => ({ label }));
+		const matches = query === "" ? [] : filterOptions(candidates, query).slice(0, MAX_SUGGESTIONS);
+		this._state.matches = matches;
+		this._state.active = NONE;
+		this._refs.listbox.replaceChildren(...matches.map((match, index) => /* @__PURE__ */ jsx("div", {
+			class: "option",
+			role: "option",
+			id: `${this._listId}-${index}`,
+			"data-index": String(index),
+			"aria-selected": "false",
+			children: highlighted(match.label, query)
+		})));
+		this.renderActive();
+		if (matches.length === 0) {
+			this.closeList();
+			return;
+		}
+		this.openList();
+	}
+	openList() {
+		if (this.isOpen()) return;
+		const popup = this._refs.popup;
+		popup.showPopover();
+		this._state.opening.abort();
+		this._state.opening = new AbortController();
+		followAnchor(this._refs.native, popup, PLACEMENT, this._state.opening.signal);
+		this._refs.native.setAttribute("aria-expanded", "true");
+	}
+	/** Closes the suggestions; true when they were open, so Escape goes no further. */
+	closeList() {
+		if (!this.isOpen()) return false;
+		this._refs.popup.hidePopover();
+		this._state.opening.abort();
+		this._state.active = NONE;
+		this.renderActive();
+		this._refs.native.setAttribute("aria-expanded", "false");
+		return true;
+	}
+	moveActive(direction) {
+		if (!this.isOpen()) return false;
+		this._state.active = nextEnabledIndex(this._state.matches, this._state.active, direction);
+		this.renderActive();
+		const item = this._refs.listbox.children[this._state.active];
+		if (item instanceof HTMLElement) keepInView(this._refs.listbox, item);
+		return true;
+	}
+	renderActive() {
+		const active = this._state.active;
+		for (const item of this._refs.listbox.querySelectorAll("[data-index]")) {
+			const isActive = Number(item.dataset.index) === active;
+			item.classList.toggle("active", isActive);
+			item.setAttribute("aria-selected", String(isActive));
+		}
+		setOrRemove(this._refs.native, "aria-activedescendant", active === NONE ? "" : `${this._listId}-${active}`);
+	}
+	suggestionAt(event) {
+		const item = event.target.closest("[data-index]");
+		return item === null ? void 0 : this._state.matches[Number(item.dataset.index)];
+	}
+	pick(suggestion) {
+		if (suggestion === void 0) return;
+		this.add([suggestion.label]);
+		this.focus();
+	}
+	/** The field is a combobox only when it offers suggestions. */
+	renderSuggestionRole(suggestions) {
+		const native = this._refs.native;
+		const offers = suggestions.length > 0;
+		setOrRemove(native, "role", offers ? "combobox" : "");
+		setOrRemove(native, "aria-autocomplete", offers ? "list" : "");
+		setOrRemove(native, "aria-controls", offers ? this._listId : "");
+		setOrRemove(native, "aria-expanded", offers ? String(this.isOpen()) : "");
+	}
+	renderTags() {
+		const tags = this.value.get();
+		const editable = !this.disabled.get();
+		this._refs.tags.replaceChildren(...tags.map((tag, index) => /* @__PURE__ */ jsxs("li", {
+			class: "tag",
+			"data-index": String(index),
+			children: [/* @__PURE__ */ jsx("span", {
+				class: "tag-text",
+				children: tag
+			}), editable ? /* @__PURE__ */ jsx("button", {
+				class: "tag-remove",
+				type: "button",
+				tabIndex: -1,
+				"aria-label": `Remove ${tag}`,
+				"data-index": String(index),
+				children: /* @__PURE__ */ jsx(JlIcon, {
+					name: "x",
+					size: REMOVE_ICON_SIZE
+				})
+			}) : null]
+		})));
+		const max = this.max.get();
+		this.reflect("full", max !== NO_LIMIT && tags.length >= max);
+		this.renderPlaceholder();
+		this.renderFormValue();
+		this.renderValidity();
+	}
+	/** The placeholder shows while there is no tag; chips take its place. */
+	renderPlaceholder() {
+		const empty = this.value.get().length === 0;
+		setOrRemove(this._refs.native, "placeholder", empty ? this.placeholder.get() : "");
+	}
+	/** Each tag is its own entry under the field's name, as several checked boxes of one name would be. */
+	renderFormValue() {
+		const name = this.getAttribute("name") ?? "";
+		if (name === "") {
+			this.internals.setFormValue(null);
+			return;
+		}
+		const data = new FormData();
+		for (const tag of this.value.get()) data.append(name, tag);
+		this.internals.setFormValue(data);
+	}
+	renderValidity() {
+		if (this.required.get() && this.value.get().length === 0) {
+			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.native);
+			return;
+		}
+		this.internals.setValidity({});
+	}
+	renderDisabled(disabled) {
+		this._refs.native.disabled = disabled;
+		this.reflect("disabled", disabled);
+		this.closeList();
+		this.renderTags();
+	}
+};
+JlTagInput.register();
+export { JlTagInput };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-timeline.css?raw
+var jl_timeline_default = ":host {\n  display: block;\n  --marker: 22px;\n  --gap: 20px;\n  --title-size: var(--jl-font-md);\n}\n\n:host([compact]) {\n  --marker: 18px;\n  --gap: 12px;\n  --title-size: var(--jl-font-sm);\n}\n\n.timeline {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.event {\n  position: relative;\n  display: grid;\n  grid-template-columns: var(--marker) minmax(0, 1fr);\n  gap: 12px;\n  padding-bottom: var(--gap);\n  --tone: var(--jl-muted);\n  --soft: var(--jl-surface-3);\n}\n\n.event:last-child {\n  padding-bottom: 0;\n}\n\n.event[data-tone=\"accent\"] {\n  --tone: var(--jl-accent);\n  --soft: var(--jl-accent-soft);\n}\n\n.event[data-tone=\"ok\"] {\n  --tone: var(--jl-ok);\n  --soft: var(--jl-ok-soft);\n}\n\n.event[data-tone=\"warn\"] {\n  --tone: var(--jl-warn);\n  --soft: var(--jl-warn-soft);\n}\n\n.event[data-tone=\"danger\"] {\n  --tone: var(--jl-danger);\n  --soft: var(--jl-danger-soft);\n}\n\n.event[data-tone=\"info\"] {\n  --tone: var(--jl-info);\n  --soft: var(--jl-info-soft);\n}\n\n/* The line runs from this marker's centre to the next one's, behind the markers. */\n.event:not(:last-child)::before {\n  position: absolute;\n  top: 10px;\n  bottom: -10px;\n  left: calc(var(--marker) / 2 - 0.5px);\n  width: 1px;\n  background: var(--jl-line-strong);\n  content: \"\";\n}\n\n.rail {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n}\n\n.marker {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n}\n\n.dot {\n  width: 10px;\n  height: 10px;\n  background: var(--tone);\n  box-shadow: 0 0 0 3px var(--jl-surface);\n}\n\n:host([compact]) .dot {\n  width: 8px;\n  height: 8px;\n}\n\n.circle {\n  width: var(--marker);\n  height: var(--marker);\n  border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--soft));\n  background: var(--soft);\n  color: var(--tone);\n  box-shadow: 0 0 0 3px var(--jl-surface);\n}\n\n.content {\n  display: grid;\n  gap: 2px;\n}\n\n.line {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 2px 12px;\n}\n\n.title {\n  color: var(--jl-text);\n  font-size: var(--title-size);\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.time {\n  flex: none;\n  margin-left: auto;\n  color: var(--jl-muted);\n  font-family: var(--jl-font-mono);\n  font-size: var(--jl-font-xs);\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 1.5;\n}\n\n:host([compact]) .description {\n  font-size: var(--jl-font-xs);\n}\n";
+export { jl_timeline_default as default };

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

@@ -0,0 +1,28 @@
+import { JlElement } from '../base/jl-element';
+import type { TimelineItem } from '../types/jl-timeline.types';
+/**
+ * What happened, in order, along a vertical line: each event a dot (or an icon in a circle) in its tone's colour,
+ * a title, an optional description, and its time on the right. `compact` tightens it for side panels.
+ */
+export declare class JlTimeline extends JlElement {
+    static readonly selector = "jl-timeline";
+    readonly items: Readonly<Readonly<{
+        get(): TimelineItem[];
+        set(setter: TimelineItem[] | ((prevState: TimelineItem[]) => TimelineItem[])): void;
+    }>>;
+    /** Smaller markers and less space between events. */
+    readonly compact: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The list's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    private render;
+    private itemNode;
+}

package/dist/molecules/jl-timeline.js

@@ -0,0 +1,81 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf } from "../lib/attributes.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import jl_timeline_default from "./jl-timeline.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-timeline.tsx
+var ICON_SIZE = 14;
+var COMPACT_ICON_SIZE = 12;
+/**
+* What happened, in order, along a vertical line: each event a dot (or an icon in a circle) in its tone's colour,
+* a title, an optional description, and its time on the right. `compact` tightens it for side panels.
+*/
+var JlTimeline = class extends JlElement {
+	static selector = "jl-timeline";
+	items = this.useChange([], () => this.render(), {
+		attribute: "items",
+		parse: jsonOf([])
+	});
+	/** Smaller markers and less space between events. */
+	compact = this.useChange(false, (value) => {
+		this.reflect("compact", value);
+		this.render();
+	}, { attribute: "compact" });
+	/** The list's name for screen readers. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.list, "aria-label", value), { attribute: "label" });
+	_refs = this.useRefs((ref) => ({ list: ref("ol") }));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("ol", {
+			class: "timeline",
+			attrs: { part: "base" }
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_timeline_default}`;
+	}
+	render() {
+		this._refs.list.replaceChildren(...this.items.get().map((item) => this.itemNode(item)));
+	}
+	itemNode(item) {
+		const size = this.compact.get() ? COMPACT_ICON_SIZE : ICON_SIZE;
+		const marker = item.icon === void 0 ? /* @__PURE__ */ jsx("span", {
+			class: "marker dot",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ jsx("span", {
+			class: "marker circle",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(JlIcon, {
+				name: item.icon,
+				size
+			})
+		});
+		return /* @__PURE__ */ jsxs("li", {
+			class: "event",
+			"data-tone": item.tone ?? "neutral",
+			children: [/* @__PURE__ */ jsx("span", {
+				class: "rail",
+				children: marker
+			}), /* @__PURE__ */ jsxs("div", {
+				class: "content",
+				children: [/* @__PURE__ */ jsxs("div", {
+					class: "line",
+					children: [/* @__PURE__ */ jsx("p", {
+						class: "title",
+						children: item.title
+					}), item.time === void 0 ? null : /* @__PURE__ */ jsx("time", {
+						class: "time",
+						children: item.time
+					})]
+				}), item.description === void 0 ? null : /* @__PURE__ */ jsx("p", {
+					class: "description",
+					children: item.description
+				})]
+			})]
+		});
+	}
+};
+JlTimeline.register();
+export { JlTimeline };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-toast.css?raw
+var jl_toast_default = ":host {\n  display: block;\n  --tone: var(--jl-text-2);\n  --bar: var(--jl-brand);\n}\n\n:host([tone=\"ok\"]) {\n  --tone: var(--jl-ok);\n  --bar: var(--jl-ok);\n}\n\n:host([tone=\"warn\"]) {\n  --tone: var(--jl-warn);\n  --bar: var(--jl-warn);\n}\n\n:host([tone=\"danger\"]) {\n  --tone: var(--jl-danger);\n  --bar: var(--jl-danger);\n}\n\n:host([tone=\"info\"]) {\n  --tone: var(--jl-info);\n  --bar: var(--jl-info);\n}\n\n.toast {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 14px 12px 14px 16px;\n  overflow: hidden;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius-lg);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n  box-shadow: var(--jl-shadow-lg);\n}\n\n.icon {\n  margin-top: 1px;\n  color: var(--tone);\n}\n\n.content {\n  display: grid;\n  flex: 1;\n  gap: 2px;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.heading {\n  font-weight: 650;\n}\n\n.text {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n}\n\n.heading[hidden] + .text {\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n}\n\n.buttons {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 2px;\n  margin: -5px -4px -5px 0;\n}\n\n.buttons:not(:has(jl-button:not([hidden]))) {\n  display: none;\n}\n\n.close {\n  --jl-accent: var(--jl-muted);\n  --jl-accent-soft: var(--jl-surface-3);\n}\n\n.progress {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n}\n\n.bar {\n  height: 100%;\n  background: var(--bar);\n  transform-origin: left center;\n}\n\n:host([paused]) .bar {\n  opacity: 0.55;\n}\n\n/* The line still counts the time, but does not move for people who asked for less motion. */\n@media (prefers-reduced-motion: reduce) {\n  .progress {\n    visibility: hidden;\n  }\n}\n";
+export { jl_toast_default as default };

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

@@ -0,0 +1,75 @@
+import { JlElement } from '../base/jl-element';
+import type { ToastTone } from '../types/jl-toast.types';
+export declare const TOAST_TONES: readonly ToastTone[];
+/**
+ * One notification: a heading, a line of text, an icon in its tone's colour, and maybe an action such as "Undo".
+ * With a `duration` it closes by itself, a thin line showing the time left; hovering or focusing it pauses the
+ * line. It emits `dismiss` once it has closed. Most pages call `toast()` rather than writing it.
+ */
+export declare class JlToast extends JlElement {
+    static readonly selector = "jl-toast";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        action: undefined;
+        dismiss: undefined;
+    }>>;
+    readonly tone: Readonly<Readonly<{
+        get(): ToastTone;
+        set(setter: ((prevState: ToastTone) => ToastTone) | ToastTone): void;
+    }>>;
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly text: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** An icon name; the tone's icon when empty. */
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Shows a close button. */
+    readonly closable: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The text of a quiet button that emits `action`, then closes the toast. */
+    readonly actionLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** How long it stays, in milliseconds; 0 keeps it until it is closed. */
+    readonly duration: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    private readonly _timer;
+    private readonly _hold;
+    private readonly _refs;
+    /** Closes the toast: it leaves, hides, then emits `dismiss`. */
+    dismiss(): void;
+    /** Shows a dismissed toast again, with its time from the start. */
+    show(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    /** The way in, once per showing; WAAPI so that the toaster moving in the top layer does not replay it. */
+    private enter;
+    private enterOffset;
+    private finishLeaving;
+    /**
+     * The time left is the progress line's own animation: pausing it pauses the countdown, and it is not cut short by
+     * reduced motion the way CSS animations are.
+     */
+    private startTimer;
+    private stopTimer;
+    private resumeTimer;
+    private hold;
+    /** Whether the focus, moving to `next`, stays in the toast (its buttons, or what the page slotted in it). */
+    private holdsFocus;
+    private renderIcon;
+    /** Inside a toaster, its live region announces the toast; alone, the toast is its own. */
+    private renderRole;
+}