@syware/jlib 0.0.0-stage → 0.1.0

package/dist/molecules/jl-code-block.js

@@ -0,0 +1,106 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { highlightedNodes } from "../lib/highlight.js";
+import { dedent } from "../lib/text.js";
+import jl_code_block_default from "./jl-code-block.css_raw.js";
+import { JlCopyButton } from "./jl-copy-button.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-code-block.tsx
+var CODE_LANGUAGES = [
+	"text",
+	"html",
+	"css",
+	"ts",
+	"bash"
+];
+var LANGUAGE_LABELS = {
+	bash: "Shell",
+	css: "CSS",
+	html: "HTML",
+	text: "",
+	ts: "TypeScript"
+};
+/**
+* Source code, coloured, with a button to copy it. The code is the `code` property, or the element's own text
+* (a `<template>` inside keeps HTML as text): `<jl-code-block language="ts">const a = 1;</jl-code-block>`.
+*/
+var JlCodeBlock = class extends JlElement {
+	static selector = "jl-code-block";
+	code = this.useChange("", () => this.render(), { attribute: "code" });
+	language = this.useChange("text", () => this.render(), {
+		attribute: "language",
+		parse: oneOf(CODE_LANGUAGES, "text")
+	});
+	/** A file name or a title over the code. */
+	heading = this.useChange("", () => this.renderHeader(), { attribute: "heading" });
+	lineNumbers = this.useChange(false, () => this.render(), { attribute: "line-numbers" });
+	hideCopy = this.useChange(false, (value) => {
+		this._refs.copy.hidden = value;
+	}, { attribute: "hide-copy" });
+	/** Wraps long lines instead of scrolling sideways. */
+	wrap = this.useChange(false, (value) => this.reflect("wrap", value), { attribute: "wrap" });
+	_refs = this.useRefs((ref) => ({
+		code: ref("code"),
+		copy: ref("jl-copy-button"),
+		gutter: ref(".gutter"),
+		header: ref("header"),
+		heading: ref(".heading"),
+		language: ref(".language")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("figure", {
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("header", {
+				hidden: true,
+				children: [/* @__PURE__ */ jsx("span", { class: "heading" }), /* @__PURE__ */ jsx("span", { class: "language" })]
+			}), /* @__PURE__ */ jsxs("div", {
+				class: "body",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						class: "gutter",
+						"aria-hidden": "true",
+						hidden: true
+					}),
+					/* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", {}) }),
+					/* @__PURE__ */ jsx(JlCopyButton, { class: "copy" })
+				]
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_code_block_default}`;
+	}
+	/** The code shown: the `code` input, or else the text the page wrote inside the element. */
+	source() {
+		const code = this.code.get();
+		if (code !== "") return code;
+		const template = this.querySelector("template");
+		return dedent(template === null ? this.textContent ?? "" : template.innerHTML);
+	}
+	render() {
+		const source = this.source();
+		const language = this.language.get();
+		this._refs.code.replaceChildren(...highlightedNodes(source, language));
+		this._refs.copy.value.set(source);
+		this.renderGutter(source);
+		this.renderHeader();
+	}
+	renderGutter(source) {
+		const gutter = this._refs.gutter;
+		gutter.hidden = !this.lineNumbers.get();
+		const count = source.split("\n").length;
+		gutter.textContent = Array.from({ length: count }, (_, index) => String(index + 1)).join("\n");
+	}
+	renderHeader() {
+		const heading = this.heading.get();
+		const label = LANGUAGE_LABELS[this.language.get()];
+		this._refs.heading.textContent = heading;
+		this._refs.language.textContent = label;
+		this._refs.header.hidden = heading === "";
+		this.reflect("has-header", heading !== "");
+	}
+};
+JlCodeBlock.register();
+export { CODE_LANGUAGES, JlCodeBlock };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-combobox.css?raw
+var jl_combobox_default = ":host {\n  display: block;\n  /* As a grid or flex item, the field may be narrower than its text field would like. */\n  min-width: 0;\n}\n\n.toggle jl-icon {\n  transition: transform var(--jl-fast) var(--jl-ease);\n}\n\n:host([open]) .toggle jl-icon {\n  transform: rotate(180deg);\n}\n\n.toggle:disabled {\n  cursor: not-allowed;\n}\n\n.popup {\n  padding: 4px;\n}\n\n.listbox {\n  position: relative;\n  max-height: 264px;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 34px;\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: 1.35;\n  cursor: pointer;\n  user-select: none;\n}\n\n.option.active {\n  background: var(--jl-surface-3);\n}\n\n.option-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.option.chosen .option-label {\n  font-weight: 600;\n}\n\n.option[aria-disabled=\"true\"] {\n  color: var(--jl-faint);\n  cursor: not-allowed;\n}\n\n.text {\n  display: grid;\n  flex: 1;\n  gap: 1px;\n  min-width: 0;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n.check {\n  color: var(--jl-accent);\n  visibility: hidden;\n}\n\n.option.chosen .check {\n  visibility: visible;\n}\n\nmark {\n  background: none;\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\n.empty {\n  padding: 8px 10px;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n}\n";
+export { jl_combobox_default as default };

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

@@ -0,0 +1,120 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { ComboboxOption } from '../types/jl-combobox.types';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A text field with a list of options that narrows as people type; they choose with the arrows and Enter, or with
+ * the pointer. The field shows the option's label, `value` and the form hold its value. With `allow-custom`, the
+ * text people type becomes the value when no option matches it.
+ */
+export declare class JlCombobox extends JlFormControl {
+    static readonly selector = "jl-combobox";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string;
+        input: string;
+    }>>;
+    readonly options: Readonly<Readonly<{
+        get(): ComboboxOption[];
+        set(setter: ComboboxOption[] | ((prevState: ComboboxOption[]) => ComboboxOption[])): void;
+    }>>;
+    /** The chosen option's value (with `allow-custom`, any text). */
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): 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;
+    }>>;
+    /** Takes the typed text as the value when no option has it as its label. */
+    readonly allowCustom: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Shows a button that empties the field while it holds text. */
+    readonly clearable: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** What the list says when no option matches. */
+    readonly emptyText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): 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;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    private readonly _listId;
+    private readonly _state;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    protected resetValue(): void;
+    protected setDisabledByForm(disabled: boolean): void;
+    private isOpen;
+    private onType;
+    private onKey;
+    /** Down opens the list or moves down it; Alt + Down opens it as it is, Alt + Up closes it. */
+    private onArrow;
+    private toggleWithAlt;
+    /** Enter chooses the active option; with free text allowed, it takes the text. It submits the form otherwise. */
+    private onEnter;
+    /** Escape closes the list, then a second one brings back the chosen option's label over unfinished typing. */
+    private onEscape;
+    /** Tab takes the option the arrows reached, and lets the focus move on. */
+    private onTab;
+    private toggleList;
+    /**
+     * Opens the list, or refreshes it, for what was typed. While typing, the first match is active, so Enter takes
+     * it; otherwise the chosen option is. With free text allowed and nothing matching, the list stays closed.
+     */
+    private openList;
+    private showPopup;
+    private closeList;
+    private chosenIndex;
+    private activateEdgeIfNone;
+    private moveActive;
+    private optionAt;
+    private hover;
+    private choose;
+    /** Leaving the field, or Enter on typed text: an option with that label, free text, nothing, or back as it was. */
+    private commitText;
+    private optionWithLabel;
+    /** Sets the value as people chose it, and says so when it changed. */
+    private commit;
+    private clearValue;
+    /** New options: the field may now show the value's label, and an open list (or one being typed in) refreshes. */
+    private renderOptionsChange;
+    private renderOptions;
+    private optionNode;
+    /** The active option is the one the arrows reached: aria-selected and aria-activedescendant follow it. */
+    private renderActive;
+    private revealActive;
+    /** The label of the value's option (or the value itself, as free text), unless people are typing. */
+    private renderValue;
+    private displayOf;
+    private renderValidity;
+    private renderClear;
+    private renderDisabled;
+}

package/dist/molecules/jl-combobox.js

@@ -0,0 +1,450 @@
+import { BASE_STYLES, CONTROL_STYLES, FLOATING_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { jsonOf, oneOf } from "../lib/attributes.js";
+import { 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 { edgeEnabledIndex, filterOptions, foldText, matchParts, nextEnabledIndex } from "../lib/option-filter.js";
+import jl_combobox_default from "./jl-combobox.css_raw.js";
+import { css } from "@jadis/core";
+import { Check, ChevronDown, X } from "lucide";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-combobox.tsx
+registerIcons({
+	check: Check,
+	"chevron-down": ChevronDown,
+	x: X
+});
+var ICON_SIZE = 16;
+var ACTION_ICON_SIZE = 14;
+var CHECK_SIZE = 14;
+var NONE = -1;
+var PLACEMENT = "bottom-start";
+var VALUE_MISSING = "Choose an option.";
+var DEFAULT_EMPTY_TEXT = "No results";
+/** A JSON attribute that should hold a list of options; anything else gives none. */
+var parseOptions = (value) => {
+	const parsed = jsonOf([])(value);
+	return Array.isArray(parsed) ? parsed : [];
+};
+/** A label with the searched text in a `<mark>`. */
+var highlighted = (label, query) => matchParts(label, query).map((part) => part.matched ? /* @__PURE__ */ jsx("mark", { children: part.text }) : part.text);
+/**
+* A text field with a list of options that narrows as people type; they choose with the arrows and Enter, or with
+* the pointer. The field shows the option's label, `value` and the form hold its value. With `allow-custom`, the
+* text people type becomes the value when no option matches it.
+*/
+var JlCombobox = class extends JlFormControl {
+	static selector = "jl-combobox";
+	events = this.useEvents();
+	options = this.useChange([], () => this.renderOptionsChange(), {
+		attribute: "options",
+		parse: parseOptions
+	});
+	/** The chosen option's value (with `allow-custom`, any text). */
+	value = this.useChange("", () => this.renderValue(), { attribute: "value" });
+	placeholder = this.useChange("", (value) => setOrRemove(this._refs.native, "placeholder", value), { 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);
+		setOrRemove(this._refs.listbox, "aria-label", value);
+	}, { attribute: "label" });
+	/** Takes the typed text as the value when no option has it as its label. */
+	allowCustom = this.useChange(false, () => this.renderValue(), { attribute: "allow-custom" });
+	/** Shows a button that empties the field while it holds text. */
+	clearable = this.useChange(false, () => this.renderClear(), { attribute: "clearable" });
+	/** What the list says when no option matches. */
+	emptyText = this.useChange(DEFAULT_EMPTY_TEXT, (value) => {
+		this._refs.empty.textContent = value;
+	}, { attribute: "empty-text" });
+	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-combobox-list");
+	_state = {
+		active: NONE,
+		matches: [],
+		opening: new AbortController(),
+		/** What people typed since the last choice; empty shows every option. */
+		query: ""
+	};
+	_refs = this.useRefs((ref) => ({
+		clear: ref(".clear"),
+		control: ref(".control"),
+		empty: ref(".empty"),
+		listbox: ref(".listbox"),
+		native: ref("input"),
+		popup: ref(".popup"),
+		toggle: ref(".toggle")
+	}));
+	focus(options) {
+		this._refs.native.focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			class: "control",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					class: "native",
+					role: "combobox",
+					"aria-autocomplete": "list",
+					"aria-expanded": "false",
+					"aria-controls": this._listId,
+					autocomplete: "off",
+					spellcheck: false
+				}),
+				/* @__PURE__ */ jsx("button", {
+					class: "action clear",
+					type: "button",
+					"aria-label": "Clear",
+					tabIndex: -1,
+					hidden: true,
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "x",
+						size: ACTION_ICON_SIZE
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					class: "action toggle",
+					type: "button",
+					"aria-label": "Show the options",
+					tabIndex: -1,
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "chevron-down",
+						size: ICON_SIZE
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			class: "floating panel popup",
+			popover: "manual",
+			attrs: { part: "list" },
+			children: [/* @__PURE__ */ jsx("div", {
+				class: "listbox",
+				role: "listbox",
+				id: this._listId
+			}), /* @__PURE__ */ jsx("p", {
+				class: "empty",
+				hidden: true
+			})]
+		})] });
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${CONTROL_STYLES}${FLOATING_STYLES}${jl_combobox_default}`;
+	}
+	onConnect() {
+		const native = this._refs.native;
+		this.on(native, "input", (event) => {
+			event.stopPropagation();
+			this.onType();
+		});
+		this.on(native, "keydown", (event) => this.onKey(event));
+		this.on(native, "blur", () => this.commitText());
+		this.on(native, "click", () => this.openList(false));
+		this.on(this._refs.toggle, "click", () => this.toggleList());
+		this.on(this._refs.clear, "click", () => this.clearValue());
+		for (const element of [
+			this._refs.popup,
+			this._refs.toggle,
+			this._refs.clear
+		]) this.on(element, "mousedown", (event) => event.preventDefault());
+		this.on(this._refs.listbox, "click", (event) => this.choose(this.optionAt(event)));
+		this.on(this._refs.listbox, "pointermove", (event) => this.hover(event));
+	}
+	onDisconnect() {
+		this._state.opening.abort();
+	}
+	resetValue() {
+		this._state.query = "";
+		this.value.set(this.getAttribute("value") ?? "");
+	}
+	setDisabledByForm(disabled) {
+		this.whenRendered(() => {
+			this._refs.native.disabled = disabled || this.disabled.get();
+		});
+	}
+	isOpen() {
+		return this._refs.popup.matches(":popover-open");
+	}
+	onType() {
+		const text = this._refs.native.value;
+		this._state.query = text;
+		this.events.emit("input", text);
+		this.renderClear();
+		this.openList(true);
+	}
+	onKey(event) {
+		if ((/* @__PURE__ */ new Map([
+			["ArrowDown", () => this.onArrow(1, event.altKey)],
+			["ArrowUp", () => this.onArrow(-1, event.altKey)],
+			["Enter", () => this.onEnter()],
+			["Escape", () => this.onEscape()],
+			["Tab", () => this.onTab()]
+		])).get(event.key)?.() === true) event.preventDefault();
+	}
+	/** Down opens the list or moves down it; Alt + Down opens it as it is, Alt + Up closes it. */
+	onArrow(direction, alt) {
+		if (alt) {
+			this.toggleWithAlt(direction);
+			return true;
+		}
+		if (!this.isOpen()) {
+			this.openList(false);
+			this.activateEdgeIfNone(direction);
+			return true;
+		}
+		this.moveActive(direction);
+		return true;
+	}
+	toggleWithAlt(direction) {
+		if (direction > 0) {
+			this.openList(false);
+			return;
+		}
+		this.closeList();
+	}
+	/** Enter chooses the active option; with free text allowed, it takes the text. It submits the form otherwise. */
+	onEnter() {
+		const active = this._state.matches[this._state.active];
+		if (this.isOpen() && active !== void 0) {
+			this.choose(active);
+			return true;
+		}
+		if (this._state.query !== "") {
+			this.commitText();
+			return true;
+		}
+		if (this.isOpen()) {
+			this.closeList();
+			return true;
+		}
+		return false;
+	}
+	/** Escape closes the list, then a second one brings back the chosen option's label over unfinished typing. */
+	onEscape() {
+		if (this.isOpen()) {
+			this.closeList();
+			return true;
+		}
+		if (this._state.query === "") return false;
+		this._state.query = "";
+		this.renderValue();
+		return true;
+	}
+	/** Tab takes the option the arrows reached, and lets the focus move on. */
+	onTab() {
+		const active = this._state.matches[this._state.active];
+		if (this.isOpen() && active !== void 0) this.choose(active);
+		return false;
+	}
+	toggleList() {
+		if (this.isOpen()) {
+			this.closeList();
+			return;
+		}
+		this.openList(false);
+		this.focus();
+	}
+	/**
+	* Opens the list, or refreshes it, for what was typed. While typing, the first match is active, so Enter takes
+	* it; otherwise the chosen option is. With free text allowed and nothing matching, the list stays closed.
+	*/
+	openList(typing) {
+		if (this.disabled.get() || this.options.get().length === 0 && this._state.query === "") return;
+		this.renderOptions();
+		const matches = this._state.matches;
+		const autoActive = typing && this._state.query.trim() !== "" && !this.allowCustom.get();
+		this._state.active = autoActive ? edgeEnabledIndex(matches, 1) : this.chosenIndex();
+		this.renderActive();
+		if (matches.length === 0 && this.allowCustom.get()) {
+			this.closeList();
+			return;
+		}
+		if (!this.isOpen()) this.showPopup();
+		this.revealActive();
+	}
+	showPopup() {
+		const popup = this._refs.popup;
+		popup.style.width = `${this._refs.control.offsetWidth}px`;
+		popup.showPopover();
+		this._state.opening.abort();
+		this._state.opening = new AbortController();
+		followAnchor(this._refs.control, popup, PLACEMENT, this._state.opening.signal);
+		this._refs.native.setAttribute("aria-expanded", "true");
+		this.reflect("open", true);
+	}
+	closeList() {
+		this._state.active = NONE;
+		this.renderActive();
+		if (!this.isOpen()) return;
+		this._refs.popup.hidePopover();
+		this._state.opening.abort();
+		this._refs.native.setAttribute("aria-expanded", "false");
+		this.reflect("open", false);
+	}
+	chosenIndex() {
+		const value = this.value.get();
+		return this._state.matches.findIndex((option) => option.value === value && option.disabled !== true);
+	}
+	activateEdgeIfNone(direction) {
+		if (this._state.active !== NONE) return;
+		this._state.active = edgeEnabledIndex(this._state.matches, direction);
+		this.renderActive();
+		this.revealActive();
+	}
+	moveActive(direction) {
+		this._state.active = nextEnabledIndex(this._state.matches, this._state.active, direction);
+		this.renderActive();
+		this.revealActive();
+	}
+	optionAt(event) {
+		const item = event.target.closest("[data-index]");
+		return item === null ? void 0 : this._state.matches[Number(item.dataset.index)];
+	}
+	hover(event) {
+		const option = this.optionAt(event);
+		const index = option === void 0 ? NONE : this._state.matches.indexOf(option);
+		if (index === this._state.active || option?.disabled === true) return;
+		this._state.active = index;
+		this.renderActive();
+	}
+	choose(option) {
+		if (option === void 0 || option.disabled === true) return;
+		this._state.query = "";
+		this.closeList();
+		this.commit(option.value);
+	}
+	/** Leaving the field, or Enter on typed text: an option with that label, free text, nothing, or back as it was. */
+	commitText() {
+		this.closeList();
+		const text = this._refs.native.value.trim();
+		const exact = this.optionWithLabel(text);
+		this._state.query = "";
+		if (exact !== void 0) {
+			this.commit(exact.value);
+			return;
+		}
+		if (text === "" || this.allowCustom.get()) {
+			this.commit(text);
+			return;
+		}
+		this.renderValue();
+	}
+	optionWithLabel(text) {
+		const folded = foldText(text);
+		return this.options.get().find((option) => option.disabled !== true && foldText(option.label) === folded);
+	}
+	/** Sets the value as people chose it, and says so when it changed. */
+	commit(value) {
+		const changed = value !== this.value.get();
+		this.value.set(value);
+		if (changed) this.events.emit("change", value);
+	}
+	clearValue() {
+		this._state.query = "";
+		this.closeList();
+		this.commit("");
+		this.focus();
+	}
+	/** New options: the field may now show the value's label, and an open list (or one being typed in) refreshes. */
+	renderOptionsChange() {
+		this.renderValue();
+		const typing = this._state.query !== "";
+		if (this.isOpen() || typing && this.matches(":focus-within")) this.openList(typing);
+	}
+	renderOptions() {
+		const matches = filterOptions(this.options.get(), this._state.query);
+		const value = this.value.get();
+		this._state.matches = matches;
+		this._refs.listbox.replaceChildren(...matches.map((option, index) => this.optionNode(option, index, value)));
+		this._refs.listbox.hidden = matches.length === 0;
+		this._refs.empty.hidden = matches.length > 0;
+	}
+	optionNode(option, index, value) {
+		return /* @__PURE__ */ jsxs("div", {
+			class: option.value === value ? "option chosen" : "option",
+			role: "option",
+			id: `${this._listId}-${index}`,
+			"data-index": String(index),
+			"aria-selected": "false",
+			"aria-disabled": option.disabled === true ? "true" : void 0,
+			children: [/* @__PURE__ */ jsxs("span", {
+				class: "text",
+				children: [/* @__PURE__ */ jsx("span", {
+					class: "option-label",
+					children: highlighted(option.label, this._state.query)
+				}), option.description === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					class: "description",
+					children: option.description
+				})]
+			}), /* @__PURE__ */ jsx(JlIcon, {
+				class: "check",
+				name: "check",
+				size: CHECK_SIZE
+			})]
+		});
+	}
+	/** The active option is the one the arrows reached: aria-selected and aria-activedescendant follow it. */
+	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}`);
+	}
+	revealActive() {
+		const item = this._refs.listbox.children[this._state.active];
+		if (item instanceof HTMLElement) keepInView(this._refs.listbox, item);
+	}
+	/** The label of the value's option (or the value itself, as free text), unless people are typing. */
+	renderValue() {
+		const value = this.value.get();
+		if (this._state.query === "") this._refs.native.value = this.displayOf(value);
+		this.internals.setFormValue(value);
+		this.renderValidity();
+		this.renderClear();
+	}
+	displayOf(value) {
+		const option = this.options.get().find((candidate) => candidate.value === value);
+		if (option !== void 0) return option.label;
+		return this.allowCustom.get() ? value : "";
+	}
+	renderValidity() {
+		if (this.required.get() && this.value.get() === "") {
+			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.native);
+			return;
+		}
+		this.internals.setValidity({});
+	}
+	renderClear() {
+		const native = this._refs.native;
+		this._refs.clear.hidden = !(this.clearable.get() && !this.disabled.get() && native.value !== "");
+	}
+	renderDisabled(disabled) {
+		this._refs.native.disabled = disabled;
+		this._refs.toggle.disabled = disabled;
+		this.reflect("disabled", disabled);
+		this.closeList();
+		this.renderClear();
+	}
+};
+JlCombobox.register();
+export { JlCombobox };

package/dist/molecules/jl-copy-button.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-copy-button.css?raw
+var jl_copy_button_default = ":host {\n  display: inline-flex;\n}\n\n:host([copied]) jl-button {\n  --jl-accent: var(--jl-ok);\n  --jl-accent-soft: var(--jl-ok-soft);\n}\n";
+export { jl_copy_button_default as default };