@syware/jlib 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,220 @@
+import { BASE_STYLES, CONTROL_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { CONTROL_SIZES } from "../lib/options.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { clamp, parseNumber, stepValue } from "../lib/numeric.js";
+import jl_number_input_default from "./jl-number-input.css_raw.js";
+import { css } from "@jadis/core";
+import { Minus, Plus } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-number-input.tsx
+registerIcons({
+	minus: Minus,
+	plus: Plus
+});
+var DEFAULT_STEP = 1;
+var PAGE_STEPS = 10;
+var ICON_SIZE = 14;
+var VALUE_MISSING = "Please fill in this field.";
+var positiveStep = (value) => {
+	const parsed = parseNumber(value);
+	return parsed === null || parsed <= 0 ? DEFAULT_STEP : parsed;
+};
+/**
+* A number field with − and + buttons. The arrow keys step it (Page Up/Down by ten steps, Home and End to the
+* bounds); what is typed is read and kept between `min` and `max` when the field is left. Empty is `null`.
+*/
+var JlNumberInput = class extends JlFormControl {
+	static selector = "jl-number-input";
+	events = this.useEvents();
+	min = this.useChange(null, () => this.renderBounds(), {
+		attribute: "min",
+		parse: parseNumber
+	});
+	max = this.useChange(null, () => this.renderBounds(), {
+		attribute: "max",
+		parse: parseNumber
+	});
+	step = this.useChange(DEFAULT_STEP, () => void 0, {
+		attribute: "step",
+		parse: positiveStep
+	});
+	/** The number, or `null` while the field is empty. */
+	value = this.useChange(null, (value) => this.renderValue(value), {
+		attribute: "value",
+		parse: parseNumber
+	});
+	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), { attribute: "label" });
+	size = this.useChange("md", (value) => this.reflect("size", value), {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	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" });
+	_state = { disabledByForm: false };
+	_refs = this.useRefs((ref) => ({
+		down: ref(".down"),
+		native: ref("input"),
+		up: ref(".up")
+	}));
+	focus(options) {
+		this._refs.native.focus(options);
+	}
+	/** Adds one step (or `count` steps, negative to go down), within the bounds, and fires `change`. */
+	stepBy(count) {
+		const direction = count < 0 ? -1 : 1;
+		const amount = this.step.get() * Math.abs(count);
+		this.commitNumber(stepValue(this.typedNumber(), amount, direction, this.min.get(), this.max.get()));
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "control",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					class: "action step down",
+					type: "button",
+					tabIndex: -1,
+					"aria-label": "Decrease",
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "minus",
+						size: ICON_SIZE
+					})
+				}),
+				/* @__PURE__ */ jsx("input", {
+					class: "native",
+					type: "text",
+					inputMode: "decimal",
+					role: "spinbutton",
+					autocomplete: "off"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					class: "action step up",
+					type: "button",
+					tabIndex: -1,
+					"aria-label": "Increase",
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "plus",
+						size: ICON_SIZE
+					})
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${CONTROL_STYLES}${jl_number_input_default}`;
+	}
+	onConnect() {
+		const native = this._refs.native;
+		this.on(native, "input", (event) => event.stopPropagation());
+		this.on(native, "blur", () => this.commitText());
+		this.on(native, "keydown", (event) => this.onKey(event));
+		for (const button of [this._refs.down, this._refs.up]) this.on(button, "mousedown", (event) => event.preventDefault());
+		this.on(this._refs.down, "click", () => this.stepBy(-1));
+		this.on(this._refs.up, "click", () => this.stepBy(1));
+	}
+	resetValue() {
+		this.value.set(parseNumber(this.getAttribute("value")));
+	}
+	/** The browser calls it for a disabled fieldset and for the element's own disabled attribute, even before render. */
+	setDisabledByForm(disabled) {
+		this._state.disabledByForm = disabled;
+		this.whenRendered(() => this.renderDisabled(this.disabled.get()));
+	}
+	onKey(event) {
+		const action = (/* @__PURE__ */ new Map([
+			["ArrowDown", () => this.stepBy(-1)],
+			["ArrowUp", () => this.stepBy(1)],
+			["End", () => this.goToBound(this.max.get())],
+			["Enter", () => this.commitText()],
+			["Home", () => this.goToBound(this.min.get())],
+			["PageDown", () => this.stepBy(-10)],
+			["PageUp", () => this.stepBy(PAGE_STEPS)]
+		])).get(event.key);
+		if (action === void 0) return;
+		event.preventDefault();
+		action();
+	}
+	/** Home and End go to a bound when there is one, and otherwise move the caret as in any field. */
+	goToBound(bound) {
+		if (bound === null) return;
+		this.commitNumber(bound);
+	}
+	/** The number typed so far, or the value when the text cannot be read. */
+	typedNumber() {
+		const text = this._refs.native.value;
+		return text.trim() === "" ? null : parseNumber(text) ?? this.value.get();
+	}
+	/** Reads what was typed: empty gives null, unreadable text goes back to the value, a number is kept in bounds. */
+	commitText() {
+		const text = this._refs.native.value;
+		if (text.trim() === "") {
+			this.commit(null);
+			return;
+		}
+		const typed = parseNumber(text);
+		if (typed === null) {
+			this.renderValue(this.value.get());
+			return;
+		}
+		this.commitNumber(typed);
+	}
+	commitNumber(value) {
+		this.commit(clamp(value, this.min.get(), this.max.get()));
+	}
+	commit(value) {
+		const changed = value !== this.value.get();
+		this.value.set(value);
+		if (changed) this.events.emit("change", value);
+	}
+	renderValue(value) {
+		const native = this._refs.native;
+		native.value = value === null ? "" : String(value);
+		setOrRemove(native, "aria-valuenow", value === null ? "" : String(value));
+		this.internals.setFormValue(value === null ? "" : String(value));
+		this.renderButtons();
+		this.renderValidity();
+	}
+	renderBounds() {
+		setOrRemove(this._refs.native, "aria-valuemin", String(this.min.get() ?? ""));
+		setOrRemove(this._refs.native, "aria-valuemax", String(this.max.get() ?? ""));
+		this.renderButtons();
+	}
+	renderDisabled(disabled) {
+		this._refs.native.disabled = disabled || this._state.disabledByForm;
+		this.reflect("disabled", disabled);
+		this.renderButtons();
+	}
+	/** A button that cannot move the value further is disabled. */
+	renderButtons() {
+		const value = this.value.get();
+		const max = this.max.get();
+		const min = this.min.get();
+		const off = this.disabled.get() || this._state.disabledByForm;
+		this._refs.down.disabled = off || value !== null && min !== null && value <= min;
+		this._refs.up.disabled = off || value !== null && max !== null && value >= max;
+	}
+	renderValidity() {
+		if (!(this.required.get() && this.value.get() === null)) {
+			this.internals.setValidity({});
+			return;
+		}
+		this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.native);
+	}
+};
+JlNumberInput.register();
+export { JlNumberInput };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-pagination.css?raw
+var jl_pagination_default = ":host {\n  display: block;\n  --height: var(--jl-control-md);\n  --font-size: var(--jl-font-sm);\n  --entry: var(--height);\n  --gap: 4px;\n  /* The width of an entry on a phone. */\n  --min-button: 26px;\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n  --font-size: var(--jl-font-xs);\n  --min-button: 24px;\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n  --font-size: var(--jl-font-md);\n  --min-button: 32px;\n}\n\n/* Each entry is a square the height of the row; on a phone the entries tighten so a row of seven or nine fits. */\n@media (width < 480px) {\n  :host {\n    --entry: var(--min-button);\n    --gap: 2px;\n  }\n}\n\nnav {\n  display: flex;\n  align-items: center;\n  gap: var(--gap);\n}\n\n.pages {\n  display: flex;\n  align-items: center;\n  gap: var(--gap);\n  padding: 0;\n  list-style: none;\n}\n\n.pages li {\n  display: flex;\n  width: var(--entry);\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--height);\n  padding: 0 2px;\n  border: 1px solid transparent;\n  border-radius: var(--jl-radius-sm);\n  background: none;\n  color: var(--jl-text-2);\n  font-size: var(--font-size);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\n.button:hover:not(:disabled, [aria-current]) {\n  background: var(--jl-surface-2);\n  color: var(--jl-text);\n}\n\n.button:active:not(:disabled, [aria-current]) {\n  background: var(--jl-surface-3);\n}\n\n.previous,\n.next {\n  flex: none;\n  width: calc(var(--entry) + 2px);\n  border-color: var(--jl-line-strong);\n  color: var(--jl-text);\n}\n\n.button:disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.page[aria-current] {\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n  cursor: default;\n}\n\n.pages .gap {\n  display: inline-flex;\n  width: calc(var(--entry) - 10px);\n  align-items: flex-end;\n  justify-content: center;\n  color: var(--jl-faint);\n  font-size: var(--font-size);\n  user-select: none;\n}\n\n.status {\n  flex: none;\n  min-width: 72px;\n  padding: 0 8px;\n  color: var(--jl-text-2);\n  font-size: var(--font-size);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n  white-space: nowrap;\n}\n";
+export { jl_pagination_default as default };

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

@@ -0,0 +1,59 @@
+import { JlElement } from '../base/jl-element';
+import type { ControlSize } from '../types/options.types';
+/**
+ * Moves through pages of results: the first and last pages, the current one with its neighbours, and gaps between;
+ * or, `compact`, "3 of 12" between two arrows. `change` fires with the page people go to.
+ */
+export declare class JlPagination extends JlElement {
+    static readonly selector = "jl-pagination";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: number;
+    }>>;
+    /** The current page, from 1. */
+    readonly page: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** How many pages there are. */
+    readonly pages: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** How many pages show on each side of the current one. */
+    readonly siblings: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** How many pages always show at each end. */
+    readonly boundaries: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** Only the arrows and "3 of 12", for narrow places. */
+    readonly compact: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    /** The navigation's name for screen readers, when a page has more than one. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** The current page, kept within the pages there are. */
+    private currentPage;
+    private render;
+    private entry;
+    private renderSize;
+    /** Goes one page back or forward from an arrow; at an end, the focus moves to the other arrow. */
+    private step;
+    /** Goes to a page people picked, and says so. */
+    private goTo;
+}

package/dist/molecules/jl-pagination.js

@@ -0,0 +1,172 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { CONTROL_SIZES } from "../lib/options.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { clampPage, pageItems } from "../lib/pagination.js";
+import jl_pagination_default from "./jl-pagination.css_raw.js";
+import { css } from "@jadis/core";
+import { ChevronLeft, ChevronRight } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-pagination.tsx
+registerIcons({
+	"chevron-left": ChevronLeft,
+	"chevron-right": ChevronRight
+});
+var ICON_SIZES = {
+	lg: 18,
+	md: 16,
+	sm: 14
+};
+var DEFAULT_LABEL = "Pagination";
+var MAX_PAGES = Number.MAX_SAFE_INTEGER;
+var MAX_NEIGHBOURS = 5;
+var STEP_BACK = -1;
+var STEP_FORWARD = 1;
+/**
+* Moves through pages of results: the first and last pages, the current one with its neighbours, and gaps between;
+* or, `compact`, "3 of 12" between two arrows. `change` fires with the page people go to.
+*/
+var JlPagination = class extends JlElement {
+	static selector = "jl-pagination";
+	events = this.useEvents();
+	/** The current page, from 1. */
+	page = this.useChange(1, () => this.render(), {
+		attribute: "page",
+		parse: clampedNumber(1, 1, MAX_PAGES)
+	});
+	/** How many pages there are. */
+	pages = this.useChange(1, () => this.render(), {
+		attribute: "pages",
+		parse: clampedNumber(1, 0, MAX_PAGES)
+	});
+	/** How many pages show on each side of the current one. */
+	siblings = this.useChange(1, () => this.render(), {
+		attribute: "siblings",
+		parse: clampedNumber(1, 0, MAX_NEIGHBOURS)
+	});
+	/** How many pages always show at each end. */
+	boundaries = this.useChange(1, () => this.render(), {
+		attribute: "boundaries",
+		parse: clampedNumber(1, 0, MAX_NEIGHBOURS)
+	});
+	/** Only the arrows and "3 of 12", for narrow places. */
+	compact = this.useChange(false, (value) => {
+		this.reflect("compact", value);
+		this.render();
+	}, { attribute: "compact" });
+	size = this.useChange("md", (value) => this.renderSize(value), {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	/** The navigation's name for screen readers, when a page has more than one. */
+	label = this.useChange(DEFAULT_LABEL, (value) => {
+		this._refs.nav.setAttribute("aria-label", value || DEFAULT_LABEL);
+	}, { attribute: "label" });
+	_refs = this.useRefs((ref) => ({
+		list: ref(".pages"),
+		nav: ref("nav"),
+		next: ref(".next"),
+		nextIcon: ref(".next jl-icon"),
+		previous: ref(".previous"),
+		previousIcon: ref(".previous jl-icon"),
+		status: ref(".status")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("nav", {
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					class: "button previous",
+					"aria-label": "Previous page",
+					children: /* @__PURE__ */ jsx(JlIcon, { name: "chevron-left" })
+				}),
+				/* @__PURE__ */ jsx("ol", { class: "pages" }),
+				/* @__PURE__ */ jsx("span", {
+					class: "status",
+					hidden: true
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					class: "button next",
+					"aria-label": "Next page",
+					children: /* @__PURE__ */ jsx(JlIcon, { name: "chevron-right" })
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_pagination_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.previous, "click", () => this.step(STEP_BACK));
+		this.on(this._refs.next, "click", () => this.step(STEP_FORWARD));
+		this.on(this._refs.list, "click", (event) => {
+			const button = event.target.closest("[data-page]");
+			if (button !== null) {
+				this.goTo(Number(button.dataset.page));
+				this._refs.list.querySelector("[aria-current]")?.focus();
+			}
+		});
+	}
+	/** The current page, kept within the pages there are. */
+	currentPage() {
+		return clampPage(this.page.get(), this.pages.get());
+	}
+	render() {
+		const pages = this.pages.get();
+		const page = this.currentPage();
+		const compact = this.compact.get();
+		this._refs.previous.disabled = page <= 1;
+		this._refs.next.disabled = page >= pages;
+		this._refs.list.hidden = compact;
+		this._refs.status.hidden = !compact;
+		this._refs.status.replaceChildren(/* @__PURE__ */ jsx("span", {
+			class: "sr-only",
+			children: "Page "
+		}), `${page} of ${Math.max(pages, 1)}`);
+		if (!compact) {
+			const items = pageItems(page, pages, this.siblings.get(), this.boundaries.get());
+			this._refs.list.replaceChildren(...items.map((item) => this.entry(item, page)));
+		}
+	}
+	entry(item, current) {
+		if (item.type === "gap") return /* @__PURE__ */ jsx("li", {
+			class: "gap",
+			"aria-hidden": "true",
+			children: "…"
+		});
+		const isCurrent = item.page === current;
+		return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			class: "button page",
+			"data-page": item.page,
+			"aria-label": `Page ${item.page}`,
+			"aria-current": isCurrent ? "page" : void 0,
+			children: String(item.page)
+		}) });
+	}
+	renderSize(size) {
+		this.reflect("size", size);
+		this._refs.previousIcon.size.set(ICON_SIZES[size]);
+		this._refs.nextIcon.size.set(ICON_SIZES[size]);
+	}
+	/** Goes one page back or forward from an arrow; at an end, the focus moves to the other arrow. */
+	step(direction) {
+		this.goTo(this.currentPage() + direction);
+		const arrow = direction === STEP_BACK ? this._refs.previous : this._refs.next;
+		const other = direction === STEP_BACK ? this._refs.next : this._refs.previous;
+		if (arrow.disabled) other.focus();
+	}
+	/** Goes to a page people picked, and says so. */
+	goTo(page) {
+		const target = clampPage(page, this.pages.get());
+		if (target === this.currentPage()) return;
+		this.page.set(target);
+		this.events.emit("change", target);
+	}
+};
+JlPagination.register();
+export { JlPagination };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-popover.css?raw
+var jl_popover_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.panel {\n  width: max-content;\n  min-width: 200px;\n  max-width: min(360px, calc(100vw - 16px));\n  padding: 14px 16px;\n  font-size: var(--jl-font-md);\n  line-height: 1.5;\n}\n\n.panel:focus-visible {\n  box-shadow: var(--jl-shadow-lg), var(--jl-focus-ring);\n}\n\nheader {\n  margin-bottom: 10px;\n}\n\nh2 {\n  font-size: var(--jl-font-md);\n  font-weight: 700;\n  line-height: 1.4;\n}\n";
+export { jl_popover_default as default };

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

@@ -0,0 +1,49 @@
+import { JlElement } from '../base/jl-element';
+import type { Placement } from '../types/floating.types';
+/**
+ * A panel of content that opens by its trigger (`slot="trigger"`) on a click, over the page: a small form, a few
+ * settings, details. A click outside or Escape closes it; the focus moves into it when it opens and back to the
+ * trigger when Escape closes it.
+ */
+export declare class JlPopover extends JlElement {
+    static readonly selector = "jl-popover";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        open: undefined;
+        close: undefined;
+    }>>;
+    /** Where the panel 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;
+    }>>;
+    readonly open: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** A title over the content; it also names the panel for screen readers. */
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _state;
+    private readonly _refs;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    onDisconnect(): void;
+    private triggerElement;
+    private isOpen;
+    /** Whether the focus is in the panel or its content, rather than on the trigger or elsewhere. */
+    private focusIsInside;
+    private renderOpen;
+    /** The panel opened or closed, by a click, by Escape or by code. */
+    private onToggle;
+    /** Keeps the panel by the trigger while it is open. */
+    private follow;
+    private focusContent;
+    private renderTrigger;
+    private renderHeading;
+}

package/dist/molecules/jl-popover.js

@@ -0,0 +1,152 @@
+import { BASE_STYLES, FLOATING_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { PLACEMENTS, followAnchor } from "../lib/floating.js";
+import { firstFocusable, setTriggerAria } from "../lib/trigger.js";
+import jl_popover_default from "./jl-popover.css_raw.js";
+import { css } from "@jadis/core";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-popover.tsx
+var CLOSED = "closed";
+/**
+* A panel of content that opens by its trigger (`slot="trigger"`) on a click, over the page: a small form, a few
+* settings, details. A click outside or Escape closes it; the focus moves into it when it opens and back to the
+* trigger when Escape closes it.
+*/
+var JlPopover = class extends JlElement {
+	static selector = "jl-popover";
+	events = this.useEvents();
+	/** Where the panel goes; it flips to the other side when there is no room. */
+	placement = this.useChange("bottom-start", () => this.follow(), {
+		attribute: "placement",
+		parse: oneOf(PLACEMENTS, "bottom-start")
+	});
+	open = this.useChange(false, (value) => this.renderOpen(value), { attribute: "open" });
+	/** A title over the content; it also names the panel for screen readers. */
+	heading = this.useChange("", () => this.renderHeading(), { attribute: "heading" });
+	_state = {
+		following: new AbortController(),
+		openAtPointerDown: false
+	};
+	_refs = this.useRefs((ref) => ({
+		content: ref("slot:not([name])"),
+		header: ref("header"),
+		heading: ref("h2"),
+		panel: ref(".panel"),
+		trigger: ref("slot[name=\"trigger\"]")
+	}));
+	show() {
+		this.open.set(true);
+	}
+	hide() {
+		this.open.set(false);
+	}
+	toggle() {
+		this.open.set((open) => !open);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("slot", { name: "trigger" }), /* @__PURE__ */ jsxs("div", {
+			class: "floating panel",
+			popover: "auto",
+			role: "dialog",
+			tabIndex: -1,
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("header", {
+				hidden: true,
+				children: /* @__PURE__ */ jsx("h2", { id: "heading" })
+			}), /* @__PURE__ */ jsx("div", {
+				class: "body",
+				children: /* @__PURE__ */ jsx("slot", {})
+			})]
+		})] });
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${FLOATING_STYLES}${jl_popover_default}`;
+	}
+	onConnect() {
+		const panel = this._refs.panel;
+		const trigger = this._refs.trigger;
+		this.renderTrigger();
+		this.on(trigger, "slotchange", () => this.renderTrigger());
+		this.on(trigger, "pointerdown", () => {
+			this._state.openAtPointerDown = this.isOpen();
+		});
+		this.on(trigger, "click", () => {
+			const closedByPointer = this._state.openAtPointerDown;
+			this._state.openAtPointerDown = false;
+			if (!closedByPointer) this.toggle();
+		});
+		this.on(panel, "beforetoggle", (event) => {
+			if (event.newState === CLOSED && this.focusIsInside()) this.triggerElement()?.focus();
+		});
+		this.on(panel, "toggle", (event) => this.onToggle(event.newState !== CLOSED));
+	}
+	onDisconnect() {
+		this._state.following.abort();
+	}
+	triggerElement() {
+		const [element] = this._refs.trigger.assignedElements({ flatten: true });
+		return element instanceof HTMLElement ? element : null;
+	}
+	isOpen() {
+		return this._refs.panel.matches(":popover-open");
+	}
+	/** Whether the focus is in the panel or its content, rather than on the trigger or elsewhere. */
+	focusIsInside() {
+		const active = this.getRootNode().activeElement;
+		const trigger = this.triggerElement();
+		if (active === null || trigger?.contains(active) === true) return false;
+		return active === this || this.contains(active);
+	}
+	renderOpen(open) {
+		this.reflect("open", open);
+		if (!this.isConnected || open === this.isOpen()) return;
+		if (!open) {
+			this._refs.panel.hidePopover();
+			return;
+		}
+		this._refs.panel.showPopover();
+		this.follow();
+		this.focusContent();
+	}
+	/** The panel opened or closed, by a click, by Escape or by code. */
+	onToggle(open) {
+		this.renderTrigger();
+		if (open !== this.open.get()) this.open.set(open);
+		if (!open) this._state.following.abort();
+		this.events.emit(open ? "open" : "close");
+	}
+	/** Keeps the panel by the trigger while it is open. */
+	follow() {
+		this._state.following.abort();
+		const trigger = this.triggerElement();
+		if (!this.isOpen() || trigger === null) return;
+		this._state.following = new AbortController();
+		followAnchor(trigger, this._refs.panel, this.placement.get(), this._state.following.signal);
+	}
+	focusContent() {
+		(firstFocusable(this._refs.content.assignedElements({ flatten: true })) ?? this._refs.panel).focus();
+	}
+	renderTrigger() {
+		const trigger = this.triggerElement();
+		if (trigger === null) return;
+		setTriggerAria(trigger, "aria-haspopup", "dialog");
+		setTriggerAria(trigger, "aria-expanded", String(this.isOpen()));
+		this.renderHeading();
+	}
+	renderHeading() {
+		const heading = this.heading.get();
+		const panel = this._refs.panel;
+		this._refs.heading.textContent = heading;
+		this._refs.header.hidden = heading === "";
+		if (heading !== "") {
+			panel.setAttribute("aria-labelledby", "heading");
+			return;
+		}
+		panel.removeAttribute("aria-labelledby");
+		const trigger = this.triggerElement();
+		panel.ariaLabelledByElements = trigger === null ? null : [trigger];
+	}
+};
+JlPopover.register();
+export { JlPopover };

package/dist/molecules/jl-radio-group.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-radio-group.css?raw
+var jl_radio_group_default = ":host {\n  display: block;\n  --dot: 18px;\n}\n\n.group {\n  display: grid;\n  gap: 10px;\n}\n\n.legend:not(.sr-only) {\n  color: var(--jl-text);\n  font-size: var(--jl-font-sm);\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.options {\n  display: grid;\n  gap: 10px;\n}\n\n:host([orientation=\"horizontal\"]) .options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px 24px;\n}\n\n.option {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n  cursor: pointer;\n  outline: none;\n}\n\n.option[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* The focus ring goes on the dot, where the eye looks for the choice. */\n.option:focus-visible {\n  box-shadow: none;\n}\n\n.dot {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--dot);\n  height: var(--dot);\n  margin-top: 1px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: 50%;\n  background: var(--jl-surface);\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.dot::after {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--jl-accent);\n  content: \"\";\n  transform: scale(0);\n  transition: transform var(--jl-fast) var(--jl-ease);\n}\n\n.option[aria-checked=\"true\"] .dot {\n  border-color: var(--jl-accent);\n}\n\n.option[aria-checked=\"true\"] .dot::after {\n  transform: scale(1);\n}\n\n.option:focus-visible .dot {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.option:not([aria-disabled=\"true\"], [aria-checked=\"true\"]):hover .dot {\n  border-color: color-mix(in srgb, var(--jl-line-strong) 60%, var(--jl-text) 18%);\n}\n\n.text {\n  display: grid;\n  gap: 2px;\n  min-width: 0;\n}\n\n.description {\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n  line-height: 18px;\n}\n\n/* Cards: each option is a bordered box; the chosen one takes the accent. */\n:host([variant=\"cards\"]) .options {\n  gap: 8px;\n}\n\n:host([variant=\"cards\"][orientation=\"horizontal\"]) .options {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));\n}\n\n:host([variant=\"cards\"]) .option {\n  padding: 12px 14px;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface);\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    background var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n:host([variant=\"cards\"]) .option:not([aria-disabled=\"true\"]):hover {\n  border-color: var(--jl-line-strong);\n}\n\n:host([variant=\"cards\"]) .option[aria-checked=\"true\"] {\n  border-color: var(--jl-accent);\n  background: var(--jl-accent-soft);\n}\n\n:host([variant=\"cards\"]) .option:focus-visible {\n  box-shadow: var(--jl-focus-ring);\n}\n\n:host([variant=\"cards\"]) .option:focus-visible .dot {\n  box-shadow: none;\n}\n\n:host([variant=\"cards\"]) .label {\n  font-weight: 600;\n}\n";
+export { jl_radio_group_default as default };