@syware/jlib 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,285 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { highlightSegments } from "../lib/fuzzy.js";
+import { hotkeyLabels, isApplePlatform, matchesHotkey, parseHotkey } from "../lib/hotkey.js";
+import { groupMatches, matchCommands } from "../lib/palette.js";
+import jl_command_palette_default from "./jl-command-palette.css_raw.js";
+import { css } from "@jadis/core";
+import { Search } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-command-palette.tsx
+registerIcons({ search: Search });
+var DEFAULT_HOTKEY = "mod+k";
+var NO_HOTKEY = "none";
+var DEFAULT_PLACEHOLDER = "Type a command or search…";
+var DEFAULT_EMPTY_TEXT = "No matching commands";
+var DEFAULT_LABEL = "Command palette";
+var SEARCH_ICON_SIZE = 18;
+var OPTION_ICON_SIZE = 16;
+/** How far each key moves the active command. */
+var MOVES = /* @__PURE__ */ new Map([["ArrowDown", 1], ["ArrowUp", -1]]);
+var optionId = (index) => `option-${index}`;
+var onApple = () => isApplePlatform(navigator.platform);
+function keycaps(shortcut) {
+	return hotkeyLabels(shortcut, onApple()).map((label) => /* @__PURE__ */ jsx("kbd", { children: label }));
+}
+function highlighted(label, positions) {
+	return highlightSegments(label, positions).map((segment) => segment.marked ? /* @__PURE__ */ jsx("mark", { children: segment.text }) : segment.text);
+}
+/**
+* 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>`.
+*/
+var JlCommandPalette = class extends JlElement {
+	static selector = "jl-command-palette";
+	events = this.useEvents();
+	commands = this.useChange([], () => this.renderResults(), {
+		attribute: "commands",
+		parse: jsonOf([])
+	});
+	open = this.useChange(false, (value) => this.renderOpen(value), { attribute: "open" });
+	placeholder = this.useChange(DEFAULT_PLACEHOLDER, (value) => {
+		this._refs.input.placeholder = value;
+	}, { attribute: "placeholder" });
+	/** The keys that open and close it from anywhere on the page; `none` for no keys. `mod` is ⌘ or Ctrl. */
+	hotkey = this.useChange(DEFAULT_HOTKEY, () => this.renderHotkey(), { attribute: "hotkey" });
+	/** What it says when nothing matches. */
+	emptyText = this.useChange(DEFAULT_EMPTY_TEXT, (value) => {
+		this._refs.empty.textContent = value;
+	}, { attribute: "empty-text" });
+	/** The dialog's name for screen readers. */
+	label = this.useChange(DEFAULT_LABEL, (value) => this._refs.dialog.setAttribute("aria-label", value), { attribute: "label" });
+	_state = {
+		active: 0,
+		matches: []
+	};
+	_refs = this.useRefs((ref) => ({
+		dialog: ref("dialog"),
+		empty: ref(".empty"),
+		hotkeyHint: ref(".hotkey-hint"),
+		hotkeyKeys: ref(".hotkey-keys"),
+		input: ref("input"),
+		results: ref(".results")
+	}));
+	show() {
+		this.open.set(true);
+	}
+	close() {
+		this.open.set(false);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("dialog", {
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					class: "search",
+					children: [
+						/* @__PURE__ */ jsx(JlIcon, {
+							class: "search-icon",
+							name: "search",
+							size: SEARCH_ICON_SIZE
+						}),
+						/* @__PURE__ */ jsx("input", {
+							type: "text",
+							role: "combobox",
+							"aria-expanded": "true",
+							"aria-controls": "results",
+							"aria-autocomplete": "list",
+							autocomplete: "off",
+							spellcheck: false
+						}),
+						/* @__PURE__ */ jsx("kbd", {
+							class: "escape",
+							children: "Esc"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "results",
+					id: "results",
+					role: "listbox",
+					"aria-label": "Commands"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					class: "empty",
+					role: "status",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsxs("footer", {
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							class: "hint",
+							children: [
+								/* @__PURE__ */ jsx("kbd", { children: "↑" }),
+								/* @__PURE__ */ jsx("kbd", { children: "↓" }),
+								"to move"
+							]
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							class: "hint",
+							children: [/* @__PURE__ */ jsx("kbd", { children: "↵" }), "to run"]
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							class: "hint hotkey-hint",
+							children: [/* @__PURE__ */ jsx("span", { class: "hotkey-keys" }), "to close"]
+						})
+					]
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_command_palette_default}`;
+	}
+	onConnect() {
+		const dialog = this._refs.dialog;
+		const input = this._refs.input;
+		this.on(document, "keydown", (event) => this.toggleOnHotkey(event));
+		this.on(input, "input", (event) => {
+			event.stopPropagation();
+			this.renderResults();
+		});
+		this.on(input, "keydown", (event) => this.navigate(event));
+		this.on(this._refs.results, "pointermove", (event) => {
+			const index = this.indexOf(event.target);
+			if (index !== null && index !== this._state.active) this.activate(index);
+		});
+		this.on(this._refs.results, "click", (event) => {
+			const index = this.indexOf(event.target);
+			if (index !== null) this.choose(index);
+		});
+		this.on(dialog, "close", () => {
+			this.reflect("open", false);
+			this.open.set(false);
+			this.events.emit("close");
+		});
+		this.on(dialog, "click", (event) => {
+			if (event.target === dialog) this.close();
+		});
+		this.renderOpen(this.open.get());
+	}
+	toggleOnHotkey(event) {
+		const hotkey = this.hotkey.get();
+		if (hotkey === "" || hotkey === NO_HOTKEY || event.defaultPrevented) return;
+		if (!matchesHotkey(event, parseHotkey(hotkey), onApple())) return;
+		event.preventDefault();
+		this.open.set(!this.open.get());
+	}
+	navigate(event) {
+		const move = MOVES.get(event.key);
+		if (move !== void 0) {
+			event.preventDefault();
+			this.move(move);
+			return;
+		}
+		if (event.key === "Enter" && !event.isComposing) {
+			event.preventDefault();
+			this.choose(this._state.active);
+		}
+	}
+	indexOf(target) {
+		const option = target instanceof Element ? target.closest("[role=\"option\"]") : null;
+		return option === null ? null : Number(option.dataset.index);
+	}
+	move(step) {
+		const count = this._state.matches.length;
+		if (count === 0) return;
+		this.activate((this._state.active + step + count) % count);
+	}
+	choose(index) {
+		const match = this._state.matches[index];
+		if (match === void 0) return;
+		this.close();
+		this.events.emit("select", match.command.id);
+	}
+	renderOpen(open) {
+		const dialog = this._refs.dialog;
+		if (open === dialog.open || !this.isConnected) return;
+		if (!open) {
+			this.reflect("open", false);
+			dialog.close();
+			return;
+		}
+		this._refs.input.value = "";
+		this.renderResults();
+		dialog.showModal();
+		this._refs.input.focus();
+		this.reflect("open", true);
+		this.events.emit("open");
+	}
+	renderHotkey() {
+		const hotkey = this.hotkey.get();
+		const none = hotkey === "" || hotkey === NO_HOTKEY;
+		this._refs.hotkeyHint.hidden = none;
+		this._refs.hotkeyKeys.replaceChildren(...none ? [] : keycaps(hotkey));
+	}
+	renderResults() {
+		const groups = groupMatches(matchCommands(this.commands.get(), this._refs.input.value));
+		this._state.matches = groups.flatMap((group) => group.matches);
+		this._refs.results.replaceChildren(...groups.map((group, index) => this.groupNode(group, index)));
+		this._refs.results.hidden = this._state.matches.length === 0;
+		this._refs.empty.hidden = this._state.matches.length > 0;
+		this.activate(0);
+	}
+	groupNode(group, groupIndex) {
+		const first = this._state.matches.indexOf(group.matches[0]);
+		const options = group.matches.map((match, index) => this.optionNode(match, first + index));
+		if (group.label === "") return /* @__PURE__ */ jsx("div", {
+			role: "group",
+			children: options
+		});
+		const labelId = `group-${groupIndex}`;
+		return /* @__PURE__ */ jsxs("div", {
+			role: "group",
+			"aria-labelledby": labelId,
+			children: [/* @__PURE__ */ jsx("div", {
+				class: "group-label",
+				id: labelId,
+				"aria-hidden": "true",
+				children: group.label
+			}), options]
+		});
+	}
+	optionNode(match, index) {
+		const { command } = match;
+		const icon = command.icon === void 0 ? /* @__PURE__ */ jsx("span", { class: "option-icon" }) : /* @__PURE__ */ jsx(JlIcon, {
+			class: "option-icon",
+			name: command.icon,
+			size: OPTION_ICON_SIZE
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			class: "option",
+			role: "option",
+			id: optionId(index),
+			"data-index": index,
+			"aria-selected": "false",
+			children: [
+				icon,
+				/* @__PURE__ */ jsx("span", {
+					class: "option-label",
+					children: highlighted(command.label, match.positions)
+				}),
+				command.shortcut === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					class: "keys",
+					children: keycaps(command.shortcut)
+				})
+			]
+		});
+	}
+	activate(index) {
+		this._state.active = index;
+		const options = this._refs.results.querySelectorAll("[role=\"option\"]");
+		for (const option of options) option.setAttribute("aria-selected", String(Number(option.dataset.index) === index));
+		const active = options[index];
+		setOrRemove(this._refs.input, "aria-activedescendant", active === void 0 ? "" : optionId(index));
+		active?.scrollIntoView({ block: "nearest" });
+	}
+};
+JlCommandPalette.register();
+export { JlCommandPalette };

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

@@ -0,0 +1,3 @@
+// src/organisms/jl-confirm.css?raw
+var jl_confirm_default = ":host {\n  display: contents;\n}\n\n.text {\n  color: var(--jl-text-2);\n}\n";
+export { jl_confirm_default as default };

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

@@ -0,0 +1,56 @@
+import { JlElement } from '../base/jl-element';
+import type { ConfirmOptions, ConfirmTone } from '../types/jl-confirm.types';
+export declare const CONFIRM_TONES: readonly ConfirmTone[];
+/**
+ * A yes-or-no question in a small modal dialog. `ask()` opens it and resolves `true` on confirm, `false` on cancel,
+ * Escape or a click outside. Most pages call `confirmDialog({ heading, text })`, which makes one, asks, and removes
+ * it. With the danger tone the confirm button is red and the focus starts on Cancel.
+ */
+export declare class JlConfirm extends JlElement {
+    static readonly selector = "jl-confirm";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        confirm: undefined;
+        cancel: undefined;
+    }>>;
+    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;
+    }>>;
+    readonly confirmLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly cancelLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly tone: Readonly<Readonly<{
+        get(): ConfirmTone;
+        set(setter: ((prevState: ConfirmTone) => ConfirmTone) | ConfirmTone): void;
+    }>>;
+    private readonly _question;
+    private readonly _refs;
+    /** Opens the question; resolves `true` when confirmed, `false` otherwise. Asking again while open waits for the same answer. */
+    ask(): Promise<boolean>;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** Every way the dialog closes ends in its close event: that is where the answer is given. */
+    private openFor;
+    /** Cancel for a dangerous question, so that a quick Enter never destroys anything; confirm otherwise. */
+    private focusFirst;
+    private answer;
+}
+/**
+ * Asks a yes-or-no question in a modal dialog and resolves the answer: `true` on confirm, `false` on cancel,
+ * Escape or a click outside. The dialog is removed once answered.
+ *
+ * ```ts
+ * if (await confirmDialog({ heading: 'Delete the file?', tone: 'danger', confirmLabel: 'Delete' })) { … }
+ * ```
+ */
+export declare function confirmDialog(options: ConfirmOptions): Promise<boolean>;

package/dist/organisms/jl-confirm.js

@@ -0,0 +1,132 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { define } from "../lib/define.js";
+import { JlButton } from "../atoms/jl-button.js";
+import jl_confirm_default from "./jl-confirm.css_raw.js";
+import { JlDialog } from "./jl-dialog.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-confirm.tsx
+define(JlDialog);
+var CONFIRM_TONES = ["accent", "danger"];
+var CONFIRM_VARIANTS = {
+	accent: "primary",
+	danger: "danger"
+};
+var DEFAULT_CONFIRM = "Confirm";
+var DEFAULT_CANCEL = "Cancel";
+var CLOSE = "close";
+/**
+* A yes-or-no question in a small modal dialog. `ask()` opens it and resolves `true` on confirm, `false` on cancel,
+* Escape or a click outside. Most pages call `confirmDialog({ heading, text })`, which makes one, asks, and removes
+* it. With the danger tone the confirm button is red and the focus starts on Cancel.
+*/
+var JlConfirm = class extends JlElement {
+	static selector = "jl-confirm";
+	events = this.useEvents();
+	heading = this.useChange("", (value) => this._refs.dialog.heading.set(value), { attribute: "heading" });
+	text = this.useChange("", (value) => {
+		this._refs.text.textContent = value;
+		this._refs.text.hidden = value === "";
+	}, { attribute: "text" });
+	confirmLabel = this.useChange(DEFAULT_CONFIRM, (value) => this._refs.confirm.label.set(value), { attribute: "confirm-label" });
+	cancelLabel = this.useChange(DEFAULT_CANCEL, (value) => this._refs.cancel.label.set(value), { attribute: "cancel-label" });
+	tone = this.useChange("accent", (value) => {
+		this.reflect("tone", value);
+		this._refs.confirm.variant.set(CONFIRM_VARIANTS[value]);
+	}, {
+		attribute: "tone",
+		parse: oneOf(CONFIRM_TONES, "accent")
+	});
+	_question = {
+		confirmed: false,
+		pending: null
+	};
+	_refs = this.useRefs((ref) => ({
+		cancel: ref(".cancel"),
+		confirm: ref(".confirm"),
+		dialog: ref("jl-dialog"),
+		text: ref(".text")
+	}));
+	/** Opens the question; resolves `true` when confirmed, `false` otherwise. Asking again while open waits for the same answer. */
+	ask() {
+		const pending = this._question.pending ?? new Promise((resolve) => this.whenRendered(() => this.openFor(resolve)));
+		this._question.pending = pending;
+		return pending;
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("jl-dialog", {
+			size: "sm",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					class: "text",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("slot", {}),
+				/* @__PURE__ */ jsx(JlButton, {
+					slot: "actions",
+					class: "cancel",
+					label: DEFAULT_CANCEL
+				}),
+				/* @__PURE__ */ jsx(JlButton, {
+					slot: "actions",
+					class: "confirm",
+					variant: "primary",
+					label: DEFAULT_CONFIRM
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_confirm_default}`;
+	}
+	onConnect() {
+		this._refs.cancel.events.register("press", () => this._refs.dialog.close());
+		this._refs.confirm.events.register("press", () => {
+			this._question.confirmed = true;
+			this._refs.dialog.close();
+		});
+	}
+	/** Every way the dialog closes ends in its close event: that is where the answer is given. */
+	openFor(resolve) {
+		const dialog = this._refs.dialog;
+		this._question.confirmed = false;
+		dialog.addEventListener(CLOSE, () => this.answer(resolve), { once: true });
+		dialog.show();
+		window.setTimeout(() => this.focusFirst());
+	}
+	/** Cancel for a dangerous question, so that a quick Enter never destroys anything; confirm otherwise. */
+	focusFirst() {
+		if (this._question.pending === null) return;
+		(this.tone.get() === "danger" ? this._refs.cancel : this._refs.confirm).focus();
+	}
+	answer(resolve) {
+		const confirmed = this._question.confirmed;
+		this._question.pending = null;
+		this._question.confirmed = false;
+		this.events.emit(confirmed ? "confirm" : "cancel");
+		resolve(confirmed);
+	}
+};
+JlConfirm.register();
+/**
+* Asks a yes-or-no question in a modal dialog and resolves the answer: `true` on confirm, `false` on cancel,
+* Escape or a click outside. The dialog is removed once answered.
+*
+* ```ts
+* if (await confirmDialog({ heading: 'Delete the file?', tone: 'danger', confirmLabel: 'Delete' })) { … }
+* ```
+*/
+function confirmDialog(options) {
+	const element = /* @__PURE__ */ jsx(JlConfirm, {
+		heading: options.heading,
+		text: options.text,
+		confirmLabel: options.confirmLabel,
+		cancelLabel: options.cancelLabel,
+		tone: options.tone
+	});
+	document.body.append(element);
+	return element.ask().finally(() => element.remove());
+}
+export { CONFIRM_TONES, JlConfirm, confirmDialog };

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

@@ -0,0 +1,3 @@
+// src/organisms/jl-dialog.css?raw
+var jl_dialog_default = ":host {\n  display: contents;\n  --width: 520px;\n}\n\n:host([size=\"sm\"]) {\n  --width: 400px;\n}\n\n:host([size=\"lg\"]) {\n  --width: 820px;\n}\n\n:host([size=\"full\"]) {\n  --width: 100vw;\n}\n\ndialog {\n  display: flex;\n  flex-direction: column;\n  width: min(var(--width), calc(100vw - 32px));\n  max-height: min(760px, calc(100dvh - 48px));\n  padding: 0;\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:not([open]) {\n  display: none;\n}\n\n:host([size=\"full\"]) dialog {\n  max-height: calc(100dvh - 32px);\n  height: calc(100dvh - 32px);\n}\n\ndialog[open] {\n  animation: rise var(--jl-slow) var(--jl-ease);\n}\n\ndialog::backdrop {\n  background: var(--jl-scrim);\n  backdrop-filter: blur(2px);\n}\n\nheader {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 20px 16px 4px 24px;\n}\n\n.titles {\n  display: grid;\n  flex: 1;\n  gap: 4px;\n  padding-top: 4px;\n}\n\nh2 {\n  font-size: 17px;\n  font-weight: 650;\n  letter-spacing: -0.01em;\n  line-height: 1.3;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 1.5;\n}\n\n.body {\n  flex: 1;\n  padding: 16px 24px;\n  overflow: auto;\n  line-height: 1.55;\n}\n\nfooter {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 0 24px 20px;\n}\n\n@keyframes rise {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.98);\n  }\n}\n";
+export { jl_dialog_default as default };

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

@@ -0,0 +1,43 @@
+import { JlElement } from '../base/jl-element';
+import type { DialogSize } from '../types/jl-dialog.types';
+export declare const DIALOG_SIZES: readonly DialogSize[];
+/**
+ * A modal window over the page, on the browser's own `<dialog>`: focus stays inside, Escape closes it. The
+ * content goes in the default slot, the buttons in `slot="actions"`. Open it with `open` or `show()`.
+ */
+export declare class JlDialog extends JlElement {
+    static readonly selector = "jl-dialog";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        open: undefined;
+        close: undefined;
+    }>>;
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly description: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): DialogSize;
+        set(setter: ((prevState: DialogSize) => DialogSize) | DialogSize): void;
+    }>>;
+    readonly open: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Keeps the dialog open on Escape and on a click outside: only its own buttons close it. */
+    readonly persistent: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    show(): void;
+    close(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private renderFooter;
+    private renderOpen;
+}

package/dist/organisms/jl-dialog.js

@@ -0,0 +1,120 @@
+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 { JlButton } from "../atoms/jl-button.js";
+import jl_dialog_default from "./jl-dialog.css_raw.js";
+import { css } from "@jadis/core";
+import { X } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-dialog.tsx
+registerIcons({ x: X });
+var DIALOG_SIZES = [
+	"md",
+	"sm",
+	"lg",
+	"full"
+];
+/**
+* A modal window over the page, on the browser's own `<dialog>`: focus stays inside, Escape closes it. The
+* content goes in the default slot, the buttons in `slot="actions"`. Open it with `open` or `show()`.
+*/
+var JlDialog = class extends JlElement {
+	static selector = "jl-dialog";
+	events = this.useEvents();
+	heading = this.useChange("", (value) => {
+		this._refs.heading.textContent = value;
+	}, { attribute: "heading" });
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+	}, { attribute: "description" });
+	size = this.useChange("md", (value) => this.reflect("size", value), {
+		attribute: "size",
+		parse: oneOf(DIALOG_SIZES, "md")
+	});
+	open = this.useChange(false, (value) => this.renderOpen(value), { attribute: "open" });
+	/** Keeps the dialog open on Escape and on a click outside: only its own buttons close it. */
+	persistent = this.useChange(false, (value) => {
+		this._refs.close.hidden = value;
+	}, { attribute: "persistent" });
+	_refs = this.useRefs((ref) => ({
+		actions: ref("slot[name=\"actions\"]"),
+		close: ref(".close"),
+		description: ref(".description"),
+		dialog: ref("dialog"),
+		footer: ref("footer"),
+		heading: ref("h2")
+	}));
+	show() {
+		this.open.set(true);
+	}
+	close() {
+		this.open.set(false);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("dialog", {
+			attrs: { part: "base" },
+			"aria-labelledby": "heading",
+			children: [
+				/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsxs("div", {
+					class: "titles",
+					children: [/* @__PURE__ */ jsx("h2", { id: "heading" }), /* @__PURE__ */ jsx("p", {
+						class: "description",
+						hidden: true
+					})]
+				}), /* @__PURE__ */ jsx(JlButton, {
+					class: "close",
+					variant: "ghost",
+					icon: "x",
+					hint: "Close",
+					size: "sm"
+				})] }),
+				/* @__PURE__ */ jsx("div", {
+					class: "body",
+					children: /* @__PURE__ */ jsx("slot", {})
+				}),
+				/* @__PURE__ */ jsx("footer", {
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", { name: "actions" })
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_dialog_default}`;
+	}
+	onConnect() {
+		const dialog = this._refs.dialog;
+		this._refs.close.events.register("press", () => this.close());
+		this.on(dialog, "close", () => {
+			this.open.set(false);
+			this.events.emit("close");
+		});
+		this.on(dialog, "cancel", (event) => {
+			if (this.persistent.get()) event.preventDefault();
+		});
+		this.on(dialog, "click", (event) => {
+			if (event.target === dialog && !this.persistent.get()) this.close();
+		});
+		this.renderFooter();
+		this.on(this._refs.actions, "slotchange", () => this.renderFooter());
+	}
+	renderFooter() {
+		this._refs.footer.hidden = this._refs.actions.assignedElements().length === 0;
+	}
+	renderOpen(open) {
+		const dialog = this._refs.dialog;
+		this.reflect("open", open);
+		if (open === dialog.open || !this.isConnected) return;
+		if (open) {
+			this.renderFooter();
+			dialog.showModal();
+			this.events.emit("open");
+			return;
+		}
+		dialog.close();
+	}
+};
+JlDialog.register();
+export { DIALOG_SIZES, JlDialog };

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

@@ -0,0 +1,3 @@
+// src/organisms/jl-drawer.css?raw
+var jl_drawer_default = ":host {\n  display: contents;\n  --size: 420px;\n  --from: translateX(100%);\n}\n\n:host([size=\"sm\"]) {\n  --size: 320px;\n}\n\n:host([size=\"lg\"]) {\n  --size: 640px;\n}\n\n:host([placement=\"left\"]) {\n  --from: translateX(-100%);\n}\n\n:host([placement=\"bottom\"]) {\n  --size: 60dvh;\n  --from: translateY(100%);\n}\n\n:host([placement=\"bottom\"][size=\"sm\"]) {\n  --size: 40dvh;\n}\n\n:host([placement=\"bottom\"][size=\"lg\"]) {\n  --size: 88dvh;\n}\n\ndialog {\n  position: fixed;\n  inset: 0 0 0 auto;\n  display: none;\n  flex-direction: column;\n  width: min(var(--size), calc(100vw - 24px));\n  max-width: none;\n  height: 100dvh;\n  max-height: none;\n  margin: 0;\n  padding: 0;\n  border: none;\n  border-left: 1px solid var(--jl-line);\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  transform: var(--from);\n  /* display and overlay stay until the slide out ends, so closing animates too. */\n  transition:\n    transform var(--jl-slow) var(--jl-ease),\n    display var(--jl-slow) allow-discrete,\n    overlay var(--jl-slow) allow-discrete;\n}\n\ndialog[open] {\n  display: flex;\n  transform: none;\n}\n\n@starting-style {\n  dialog[open] {\n    transform: var(--from);\n  }\n}\n\n:host([placement=\"left\"]) dialog {\n  inset: 0 auto 0 0;\n  border-right: 1px solid var(--jl-line);\n  border-left: none;\n}\n\n:host([placement=\"bottom\"]) dialog {\n  inset: auto 0 0;\n  width: 100%;\n  height: auto;\n  max-height: var(--size);\n  border: 1px solid var(--jl-line);\n  border-bottom: none;\n  border-radius: var(--jl-radius-xl) var(--jl-radius-xl) 0 0;\n}\n\ndialog::backdrop {\n  background: transparent;\n  transition:\n    background var(--jl-slow) var(--jl-ease),\n    display var(--jl-slow) allow-discrete,\n    overlay var(--jl-slow) allow-discrete;\n}\n\ndialog[open]::backdrop {\n  background: var(--jl-scrim);\n}\n\n@starting-style {\n  dialog[open]::backdrop {\n    background: transparent;\n  }\n}\n\n.handle {\n  display: none;\n}\n\n:host([placement=\"bottom\"]) .handle {\n  display: block;\n  flex: none;\n  width: 40px;\n  height: 4px;\n  margin: 10px auto 0;\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-line-strong);\n}\n\nheader {\n  display: flex;\n  flex: none;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 18px 16px 14px 24px;\n  border-bottom: 1px solid var(--jl-line);\n}\n\n:host([placement=\"bottom\"]) header {\n  padding-top: 10px;\n}\n\n.titles {\n  display: grid;\n  flex: 1;\n  gap: 4px;\n  min-width: 0;\n  padding-top: 4px;\n}\n\nh2 {\n  font-size: 17px;\n  font-weight: 650;\n  letter-spacing: -0.01em;\n  line-height: 1.3;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 1.5;\n}\n\n.actions {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 4px;\n}\n\n.body {\n  flex: 1;\n  min-height: 0;\n  padding: 20px 24px;\n  overflow: auto;\n  line-height: 1.55;\n  overscroll-behavior: contain;\n}\n\nfooter {\n  display: flex;\n  flex: none;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 14px 24px;\n  border-top: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host([placement=\"bottom\"]) footer {\n  padding-bottom: max(14px, env(safe-area-inset-bottom));\n}\n";
+export { jl_drawer_default as default };