@syware/jlib 0.0.0-stage → 0.1.3

package/dist/molecules/jl-toast.js

@@ -0,0 +1,274 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { TONE_ICONS } from "../lib/options.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { JlButton } from "../atoms/jl-button.js";
+import jl_toast_default from "./jl-toast.css_raw.js";
+import { css } from "@jadis/core";
+import { CircleCheck, CircleX, Info, Sparkles, TriangleAlert, X } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-toast.tsx
+registerIcons({
+	"circle-check": CircleCheck,
+	"circle-x": CircleX,
+	info: Info,
+	sparkles: Sparkles,
+	"triangle-alert": TriangleAlert,
+	x: X
+});
+var TOAST_TONES = [
+	"neutral",
+	"ok",
+	"warn",
+	"danger",
+	"info"
+];
+var ICON_SIZE = 18;
+var ENTER_MS = 240;
+var LEAVE_MS = 180;
+var ENTER_OFFSET = "--jl-toast-enter";
+var DEFAULT_OFFSET = "8px";
+var EASE = "cubic-bezier(0.2, 0.7, 0.2, 1)";
+var REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+var TOASTER = "jl-toaster";
+/** Alone on a page, a toast announces itself: danger interrupts, the others wait their turn. */
+var STANDALONE_ROLES = {
+	danger: "alert",
+	info: "status",
+	neutral: "status",
+	ok: "status",
+	warn: "status"
+};
+var prefersReducedMotion = () => window.matchMedia(REDUCED_MOTION).matches;
+/**
+* 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.
+*/
+var JlToast = class extends JlElement {
+	static selector = "jl-toast";
+	events = this.useEvents();
+	tone = this.useChange("neutral", (value) => {
+		this.reflect("tone", value);
+		this.renderIcon();
+		this.renderRole();
+	}, {
+		attribute: "tone",
+		parse: oneOf(TOAST_TONES, "neutral")
+	});
+	heading = this.useChange("", (value) => {
+		this._refs.heading.textContent = value;
+		this._refs.heading.hidden = value === "";
+	}, { attribute: "heading" });
+	text = this.useChange("", (value) => {
+		this._refs.text.textContent = value;
+		this._refs.text.hidden = value === "";
+	}, { attribute: "text" });
+	/** An icon name; the tone's icon when empty. */
+	icon = this.useChange("", () => this.renderIcon(), { attribute: "icon" });
+	/** Shows a close button. */
+	closable = this.useChange(false, (value) => {
+		this._refs.close.hidden = !value;
+	}, { attribute: "closable" });
+	/** The text of a quiet button that emits `action`, then closes the toast. */
+	actionLabel = this.useChange("", (value) => {
+		this._refs.action.label.set(value);
+		this._refs.action.hidden = value === "";
+	}, { attribute: "action-label" });
+	/** How long it stays, in milliseconds; 0 keeps it until it is closed. */
+	duration = this.useChange(0, () => this.startTimer(), { attribute: "duration" });
+	_timer = {
+		animation: null,
+		entered: false
+	};
+	_hold = {
+		focus: false,
+		pointer: false
+	};
+	_refs = this.useRefs((ref) => ({
+		action: ref(".action"),
+		bar: ref(".bar"),
+		close: ref(".close"),
+		heading: ref(".heading"),
+		icon: ref(".icon"),
+		progress: ref(".progress"),
+		text: ref(".text"),
+		toast: ref(".toast")
+	}));
+	/** Closes the toast: it leaves, hides, then emits `dismiss`. */
+	dismiss() {
+		if (this.hidden || this.hasAttribute("leaving")) return;
+		this.stopTimer();
+		this.reflect("leaving", true);
+		const done = () => this.finishLeaving();
+		if (!this.isConnected || prefersReducedMotion()) {
+			done();
+			return;
+		}
+		const offset = this.enterOffset();
+		this._refs.toast.animate([{ opacity: 1 }, {
+			opacity: 0,
+			transform: `translateY(${offset}) scale(0.97)`
+		}], {
+			duration: LEAVE_MS,
+			easing: EASE,
+			fill: "forwards"
+		}).finished.then(done, done);
+	}
+	/** Shows a dismissed toast again, with its time from the start. */
+	show() {
+		this.hidden = false;
+		this._timer.entered = false;
+		this.whenRendered(() => {
+			this.enter();
+			this.startTimer();
+		});
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "toast",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx(JlIcon, {
+					class: "icon",
+					size: ICON_SIZE
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "content",
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							class: "heading",
+							hidden: true
+						}),
+						/* @__PURE__ */ jsx("p", {
+							class: "text",
+							hidden: true
+						}),
+						/* @__PURE__ */ jsx("slot", {})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "buttons",
+					children: [/* @__PURE__ */ jsx(JlButton, {
+						class: "action",
+						variant: "ghost",
+						size: "sm",
+						hidden: true
+					}), /* @__PURE__ */ jsx(JlButton, {
+						class: "close",
+						variant: "ghost",
+						size: "sm",
+						icon: "x",
+						hint: "Close",
+						hidden: true
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "progress",
+					"aria-hidden": "true",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("div", { class: "bar" })
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_toast_default}`;
+	}
+	onConnect() {
+		this._refs.close.events.register("press", () => this.dismiss());
+		this._refs.action.events.register("press", () => {
+			this.events.emit("action");
+			this.dismiss();
+		});
+		this.on(this, "pointerenter", () => this.hold("pointer", true));
+		this.on(this, "pointerleave", () => this.hold("pointer", false));
+		this.on(this, "focusin", () => this.hold("focus", true));
+		this.on(this, "focusout", (event) => this.hold("focus", this.holdsFocus(event.relatedTarget)));
+		this.renderRole();
+		this.enter();
+		this.resumeTimer();
+	}
+	onDisconnect() {
+		this._timer.animation?.pause();
+	}
+	/** The way in, once per showing; WAAPI so that the toaster moving in the top layer does not replay it. */
+	enter() {
+		if (this._timer.entered || this.hidden) return;
+		this._timer.entered = true;
+		if (prefersReducedMotion()) return;
+		const offset = this.enterOffset();
+		this._refs.toast.animate([{
+			opacity: 0,
+			transform: `translateY(${offset}) scale(0.98)`
+		}, { opacity: 1 }], {
+			duration: ENTER_MS,
+			easing: EASE
+		});
+	}
+	enterOffset() {
+		return getComputedStyle(this).getPropertyValue(ENTER_OFFSET).trim() || DEFAULT_OFFSET;
+	}
+	finishLeaving() {
+		this.reflect("leaving", false);
+		this.hidden = true;
+		this.events.emit("dismiss");
+	}
+	/**
+	* 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.
+	*/
+	startTimer() {
+		this.stopTimer();
+		const duration = this.duration.get();
+		this._refs.progress.hidden = duration <= 0;
+		if (duration <= 0 || !this.isConnected || this.hidden) return;
+		const animation = this._refs.bar.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
+			duration,
+			easing: "linear",
+			fill: "forwards"
+		});
+		animation.finished.then(() => this.dismiss(), () => void 0);
+		this._timer.animation = animation;
+		this.resumeTimer();
+	}
+	stopTimer() {
+		this._timer.animation?.cancel();
+		this._timer.animation = null;
+	}
+	resumeTimer() {
+		const animation = this._timer.animation;
+		if (animation === null) return;
+		const held = this._hold.pointer || this._hold.focus;
+		this.reflect("paused", held);
+		if (held) {
+			animation.pause();
+			return;
+		}
+		animation.play();
+	}
+	hold(reason, on) {
+		this._hold[reason] = on;
+		this.resumeTimer();
+	}
+	/** Whether the focus, moving to `next`, stays in the toast (its buttons, or what the page slotted in it). */
+	holdsFocus(next) {
+		return next instanceof Node && (next === this || this.contains(next) || this._refs.toast.contains(next));
+	}
+	renderIcon() {
+		const icon = this.icon.get();
+		this._refs.icon.name.set(icon === "" ? TONE_ICONS[this.tone.get()] : icon);
+	}
+	/** Inside a toaster, its live region announces the toast; alone, the toast is its own. */
+	renderRole() {
+		if (this.closest(TOASTER) !== null) {
+			this._refs.toast.removeAttribute("role");
+			return;
+		}
+		this._refs.toast.setAttribute("role", STANDALONE_ROLES[this.tone.get()]);
+	}
+};
+JlToast.register();
+export { JlToast, TOAST_TONES };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-tooltip.css?raw
+var jl_tooltip_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n/* Ink on the page's ground: dark on a light theme, light on a dark one. */\n.bubble {\n  max-width: min(260px, calc(100vw - 16px));\n  padding: 6px 9px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-text);\n  color: var(--jl-bg);\n  font-size: var(--jl-font-xs);\n  font-weight: 550;\n  line-height: 1.4;\n  box-shadow: var(--jl-shadow);\n  pointer-events: auto;\n}\n\n.arrow {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  border-radius: 1px;\n  background: inherit;\n  rotate: 45deg;\n}\n\n.bubble[data-placement^=\"top\"] .arrow {\n  top: 100%;\n  left: var(--arrow, 50%);\n  translate: -50% -50%;\n}\n\n.bubble[data-placement^=\"bottom\"] .arrow {\n  bottom: 100%;\n  left: var(--arrow, 50%);\n  translate: -50% 50%;\n}\n\n.bubble[data-placement^=\"left\"] .arrow {\n  top: var(--arrow, 50%);\n  left: 100%;\n  translate: -50% -50%;\n}\n\n.bubble[data-placement^=\"right\"] .arrow {\n  top: var(--arrow, 50%);\n  right: 100%;\n  translate: 50% -50%;\n}\n";
+export { jl_tooltip_default as default };

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

@@ -0,0 +1,44 @@
+import { JlElement } from '../base/jl-element';
+import type { Placement } from '../types/floating.types';
+/**
+ * A short hint in a dark bubble by its trigger (the slotted element): it shows on hover and on keyboard focus after
+ * a `delay`, and hides on leave, blur and Escape. The trigger gets the text as its accessible description.
+ */
+export declare class JlTooltip extends JlElement {
+    static readonly selector = "jl-tooltip";
+    readonly text: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Where the bubble goes; it flips to the other side when there is no room. */
+    readonly placement: Readonly<Readonly<{
+        get(): Placement;
+        set(setter: ((prevState: Placement) => Placement) | Placement): void;
+    }>>;
+    /** How long the pointer or the focus stays on the trigger before the bubble shows, in milliseconds. */
+    readonly delay: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    private readonly _state;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    /** Shows the bubble now. */
+    show(): void;
+    /** Hides the bubble now. */
+    hide(): void;
+    private close;
+    private trigger;
+    private isOpen;
+    private scheduleShow;
+    private scheduleHide;
+    private open;
+    private reposition;
+    private placeArrow;
+    private renderText;
+    /** Gives the trigger the text as its description, and takes it back from a trigger that left. */
+    private describeTrigger;
+}

package/dist/molecules/jl-tooltip.js

@@ -0,0 +1,160 @@
+import { BASE_STYLES, FLOATING_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { PLACEMENTS, followAnchor, placeFloating } from "../lib/floating.js";
+import { accessibleTarget, deepActiveElement } from "../lib/trigger.js";
+import { arrowOffset } from "../lib/arrow.js";
+import jl_tooltip_default from "./jl-tooltip.css_raw.js";
+import { css } from "@jadis/core";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-tooltip.tsx
+var DEFAULT_DELAY_MS = 300;
+var MAX_DELAY_MS = 1e4;
+var HIDE_GRACE_MS = 120;
+var GAP = 9;
+var ARROW_MARGIN = 10;
+var DESCRIPTION = "aria-description";
+var sideOf = (placement) => placement.split("-")[0];
+/**
+* A short hint in a dark bubble by its trigger (the slotted element): it shows on hover and on keyboard focus after
+* a `delay`, and hides on leave, blur and Escape. The trigger gets the text as its accessible description.
+*/
+var JlTooltip = class extends JlElement {
+	static selector = "jl-tooltip";
+	text = this.useChange("", (value) => this.renderText(value), { attribute: "text" });
+	/** Where the bubble goes; it flips to the other side when there is no room. */
+	placement = this.useChange("top", () => this.reposition(), {
+		attribute: "placement",
+		parse: oneOf(PLACEMENTS, "top")
+	});
+	/** How long the pointer or the focus stays on the trigger before the bubble shows, in milliseconds. */
+	delay = this.useChange(DEFAULT_DELAY_MS, () => void 0, {
+		attribute: "delay",
+		parse: clampedNumber(DEFAULT_DELAY_MS, 0, MAX_DELAY_MS)
+	});
+	_state = {
+		described: null,
+		following: new AbortController(),
+		hideTimer: 0,
+		showTimer: 0
+	};
+	_refs = this.useRefs((ref) => ({
+		bubble: ref(".bubble"),
+		slot: ref("slot"),
+		text: ref(".text")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("slot", {}), /* @__PURE__ */ jsxs("div", {
+			class: "floating bubble",
+			popover: "manual",
+			role: "tooltip",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("span", { class: "text" }), /* @__PURE__ */ jsx("span", { class: "arrow" })]
+		})] });
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${FLOATING_STYLES}${jl_tooltip_default}`;
+	}
+	onConnect() {
+		this.describeTrigger();
+		this.on(this._refs.slot, "slotchange", () => this.describeTrigger());
+		this.on(this, "pointerenter", () => this.scheduleShow());
+		this.on(this, "pointerleave", () => this.scheduleHide());
+		this.on(this, "pointerdown", () => this.close());
+		this.on(this, "focusin", () => {
+			if (deepActiveElement(document)?.matches(":focus-visible") === true) this.scheduleShow();
+		});
+		this.on(this, "focusout", () => this.close());
+	}
+	onDisconnect() {
+		this.close();
+	}
+	/** Shows the bubble now. */
+	show() {
+		this.whenRendered(() => this.open());
+	}
+	/** Hides the bubble now. */
+	hide() {
+		this.whenRendered(() => this.close());
+	}
+	close() {
+		window.clearTimeout(this._state.showTimer);
+		window.clearTimeout(this._state.hideTimer);
+		this._state.following.abort();
+		const bubble = this._refs.bubble;
+		if (bubble.matches(":popover-open")) bubble.hidePopover();
+	}
+	trigger() {
+		return this._refs.slot.assignedElements({ flatten: true })[0] ?? this;
+	}
+	isOpen() {
+		return this._refs.bubble.matches(":popover-open");
+	}
+	scheduleShow() {
+		window.clearTimeout(this._state.hideTimer);
+		if (this.isOpen()) return;
+		window.clearTimeout(this._state.showTimer);
+		this._state.showTimer = window.setTimeout(() => this.open(), this.delay.get());
+	}
+	scheduleHide() {
+		window.clearTimeout(this._state.showTimer);
+		window.clearTimeout(this._state.hideTimer);
+		this._state.hideTimer = window.setTimeout(() => this.close(), HIDE_GRACE_MS);
+	}
+	open() {
+		if (this.text.get() === "" || this.isOpen()) return;
+		const bubble = this._refs.bubble;
+		bubble.showPopover();
+		const following = new AbortController();
+		this._state.following = following;
+		followAnchor(this.trigger(), bubble, this.placement.get(), following.signal, GAP);
+		window.addEventListener("scroll", () => this.placeArrow(), {
+			capture: true,
+			passive: true,
+			signal: following.signal
+		});
+		window.addEventListener("resize", () => this.placeArrow(), {
+			passive: true,
+			signal: following.signal
+		});
+		document.addEventListener("keydown", (event) => {
+			if (event.key === "Escape") this.close();
+		}, { signal: following.signal });
+		this.placeArrow();
+	}
+	reposition() {
+		if (!this.isOpen()) return;
+		placeFloating(this.trigger(), this._refs.bubble, this.placement.get(), GAP);
+		this.placeArrow();
+	}
+	placeArrow() {
+		const bubble = this._refs.bubble;
+		const placement = bubble.dataset.placement ?? this.placement.get();
+		const offset = arrowOffset(this.trigger().getBoundingClientRect(), bubble.getBoundingClientRect(), sideOf(placement), ARROW_MARGIN);
+		bubble.style.setProperty("--arrow", `${offset}px`);
+	}
+	renderText(text) {
+		this._refs.text.textContent = text;
+		this.describeTrigger();
+		if (text === "") {
+			this.close();
+			return;
+		}
+		this.reposition();
+	}
+	/** Gives the trigger the text as its description, and takes it back from a trigger that left. */
+	describeTrigger() {
+		const target = accessibleTarget(this.trigger());
+		const previous = this._state.described;
+		if (previous !== null && previous !== target) previous.removeAttribute(DESCRIPTION);
+		this._state.described = target;
+		const text = this.text.get();
+		if (text === "" || target === this) {
+			target.removeAttribute(DESCRIPTION);
+			return;
+		}
+		target.setAttribute(DESCRIPTION, text);
+	}
+};
+JlTooltip.register();
+export { JlTooltip };

package/dist/organisms/jl-command-palette.css_raw.js

@@ -0,0 +1,3 @@
+// src/organisms/jl-command-palette.css?raw
+var jl_command_palette_default = ":host {\n  display: contents;\n}\n\ndialog {\n  flex-direction: column;\n  width: min(620px, calc(100vw - 24px));\n  max-width: none;\n  max-height: min(520px, calc(100dvh - 24vh));\n  margin: 12vh auto auto;\n  padding: 0;\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  box-shadow: var(--jl-shadow-lg);\n}\n\ndialog[open] {\n  display: flex;\n  animation: drop var(--jl-fast) var(--jl-ease);\n}\n\ndialog::backdrop {\n  background: var(--jl-scrim);\n  backdrop-filter: blur(2px);\n}\n\n.search {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 10px;\n  height: 52px;\n  padding: 0 14px 0 16px;\n  border-bottom: 1px solid var(--jl-line);\n}\n\n.search-icon {\n  color: var(--jl-faint);\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: none;\n  font-size: 15px;\n}\n\ninput::placeholder {\n  color: var(--jl-faint);\n}\n\ninput:focus-visible {\n  box-shadow: none;\n}\n\nkbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 5px;\n  border: 1px solid var(--jl-line-strong);\n  border-bottom-width: 2px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-surface);\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n}\n\n.results {\n  flex: 1;\n  min-height: 0;\n  padding: 6px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scroll-padding: 6px;\n}\n\n[role=\"group\"] + [role=\"group\"] {\n  margin-top: 4px;\n  padding-top: 4px;\n  border-top: 1px solid var(--jl-line-soft);\n}\n\n.group-label {\n  padding: 8px 10px 4px;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 38px;\n  padding: 0 10px;\n  border-radius: var(--jl-radius-sm);\n  color: var(--jl-text-2);\n  cursor: pointer;\n}\n\n.option[aria-selected=\"true\"] {\n  background: var(--jl-accent-soft);\n  color: var(--jl-text);\n}\n\n.option-icon {\n  flex: none;\n  width: 16px;\n  color: var(--jl-muted);\n}\n\n.option[aria-selected=\"true\"] .option-icon {\n  color: var(--jl-accent);\n}\n\n.option-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\nmark {\n  background: none;\n  color: var(--jl-accent);\n  font-weight: 700;\n}\n\n.keys {\n  display: inline-flex;\n  flex: none;\n  gap: 3px;\n}\n\n.empty {\n  padding: 36px 16px;\n  color: var(--jl-muted);\n  text-align: center;\n}\n\nfooter {\n  display: flex;\n  flex: none;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px 16px;\n  padding: 8px 16px;\n  border-top: 1px solid var(--jl-line);\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n.hint,\n.hotkey-keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.hotkey-hint {\n  margin-left: auto;\n}\n\n@media (width < 520px) {\n  dialog {\n    margin-top: 12px;\n    max-height: calc(100dvh - 24px);\n  }\n\n  .hotkey-hint {\n    display: none;\n  }\n}\n\n@keyframes drop {\n  from {\n    opacity: 0;\n    transform: translateY(-6px) scale(0.98);\n  }\n}\n";
+export { jl_command_palette_default as default };

package/dist/organisms/jl-command-palette.d.ts

@@ -0,0 +1,60 @@
+import { JlElement } from '../base/jl-element';
+import type { PaletteCommand } from '../types/jl-command-palette.types';
+/**
+ * A search box over every command of an app, opened by ⌘K (Ctrl+K off Apple) or `show()`. Typing filters the
+ * commands by their letters in order, best matches first, under their groups; arrows move, Enter runs the command
+ * (`select` with its id) and Escape closes. It sits near the top of the window, on the browser's modal `<dialog>`.
+ */
+export declare class JlCommandPalette extends JlElement {
+    static readonly selector = "jl-command-palette";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        select: string;
+        open: undefined;
+        close: undefined;
+    }>>;
+    readonly commands: Readonly<Readonly<{
+        get(): PaletteCommand[];
+        set(setter: PaletteCommand[] | ((prevState: PaletteCommand[]) => PaletteCommand[])): void;
+    }>>;
+    readonly open: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly placeholder: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The keys that open and close it from anywhere on the page; `none` for no keys. `mod` is ⌘ or Ctrl. */
+    readonly hotkey: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** What it says when nothing matches. */
+    readonly emptyText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The dialog's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _state;
+    private readonly _refs;
+    show(): void;
+    close(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private toggleOnHotkey;
+    private navigate;
+    private indexOf;
+    private move;
+    private choose;
+    private renderOpen;
+    private renderHotkey;
+    private renderResults;
+    private groupNode;
+    private optionNode;
+    private activate;
+}