@syware/jlib 0.0.0-stage → 0.1.3

package/dist/molecules/jl-accordion.js

@@ -0,0 +1,61 @@
+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 { JlAccordionItem } from "./jl-accordion-item.js";
+import jl_accordion_default from "./jl-accordion.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-accordion.tsx
+var ACCORDION_VARIANTS = ["plain", "bordered"];
+define(JlAccordionItem);
+var TOGGLE = "toggle";
+/**
+* A list of `jl-accordion-item`s. One item opens at a time (opening one closes the others) unless `multiple` is
+* set. `bordered` puts the items in a box with lines between them.
+*/
+var JlAccordion = class extends JlElement {
+	static selector = "jl-accordion";
+	/** Lets several items stay open together. */
+	multiple = this.useChange(false, () => this.keepOneOpen(), { attribute: "multiple" });
+	variant = this.useChange("plain", (value) => this.reflect("variant", value), {
+		attribute: "variant",
+		parse: oneOf(ACCORDION_VARIANTS, "plain")
+	});
+	templateHtml() {
+		return /* @__PURE__ */ jsx("div", {
+			class: "accordion",
+			attrs: { part: "base" },
+			children: /* @__PURE__ */ jsx("slot", {})
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_accordion_default}`;
+	}
+	onConnect() {
+		this.keepOneOpen();
+		this.addEventListener(TOGGLE, (event) => this.onToggle(event), {
+			capture: true,
+			signal: this.killSignal
+		});
+	}
+	items() {
+		return [...this.children].filter((child) => child instanceof JlAccordionItem);
+	}
+	onToggle(event) {
+		const item = event.target;
+		const opened = event.detail === true;
+		if (!(item instanceof JlAccordionItem) || item.parentElement !== this || !opened || this.multiple.get()) return;
+		this.closeAllBut(item);
+	}
+	/** Without `multiple`, only the first open item stays open. */
+	keepOneOpen() {
+		const firstOpen = this.items().find((item) => item.open.get());
+		if (firstOpen !== void 0 && !this.multiple.get()) this.closeAllBut(firstOpen);
+	}
+	closeAllBut(kept) {
+		for (const item of this.items()) if (item !== kept && item.open.get()) item.open.set(false);
+	}
+};
+JlAccordion.register();
+export { ACCORDION_VARIANTS, JlAccordion };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-alert.css?raw
+var jl_alert_default = ":host {\n  display: block;\n  --fg: var(--jl-info);\n  --bg: var(--jl-info-soft);\n  --border: color-mix(in srgb, var(--fg) 24%, var(--bg));\n}\n\n:host([tone=\"accent\"]) {\n  --fg: var(--jl-accent);\n  --bg: var(--jl-accent-soft);\n}\n\n:host([tone=\"ok\"]) {\n  --fg: var(--jl-ok);\n  --bg: var(--jl-ok-soft);\n}\n\n:host([tone=\"warn\"]) {\n  --fg: var(--jl-warn);\n  --bg: var(--jl-warn-soft);\n}\n\n:host([tone=\"danger\"]) {\n  --fg: var(--jl-danger);\n  --bg: var(--jl-danger-soft);\n}\n\n:host([tone=\"neutral\"]) {\n  --fg: var(--jl-muted);\n  --bg: var(--jl-surface-2);\n  --border: var(--jl-line);\n}\n\n.alert {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 12px 14px;\n  border: 1px solid var(--border);\n  border-radius: var(--jl-radius);\n  background: var(--bg);\n  color: var(--jl-text-2);\n  font-size: var(--jl-font-md);\n  line-height: 1.5;\n}\n\n:host([dismissible]) .alert {\n  padding-right: 8px;\n}\n\n.icon {\n  /* Centred on the first line of text: 21px high at this size. */\n  margin-top: 1.5px;\n  color: var(--fg);\n}\n\n.content {\n  display: grid;\n  flex: 1;\n  gap: 2px;\n  min-width: 0;\n}\n\n.heading {\n  color: var(--jl-text);\n  font-weight: 650;\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 10px;\n}\n\n.close {\n  margin: -5px 0 -5px 0;\n  --jl-accent: var(--fg);\n  --jl-accent-soft: color-mix(in srgb, var(--fg) 12%, transparent);\n}\n\n::slotted(a) {\n  color: inherit;\n  font-weight: 600;\n}\n";
+export { jl_alert_default as default };

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

@@ -0,0 +1,38 @@
+import { JlElement } from '../base/jl-element';
+import type { Tone } from '../types/options.types';
+/**
+ * A message in the flow of the page, coloured by its tone: a tip, a success, a warning, an error. The text goes
+ * in the default slot, buttons in `slot="actions"`. A `dismissible` alert has an × that hides it.
+ */
+export declare class JlAlert extends JlElement {
+    static readonly selector = "jl-alert";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        dismiss: undefined;
+    }>>;
+    readonly tone: Readonly<Readonly<{
+        get(): Tone;
+        set(setter: ((prevState: Tone) => Tone) | Tone): void;
+    }>>;
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** An icon name in place of the tone's own; `none` shows no icon. */
+    readonly icon: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Shows an × that hides the alert and fires `dismiss`. */
+    readonly dismissible: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    /** Hides the alert as its × does, and fires `dismiss`. */
+    dismiss(): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private renderActions;
+    private renderIcon;
+}

package/dist/molecules/jl-alert.js

@@ -0,0 +1,131 @@
+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 { TONES, TONE_ICONS } from "../lib/options.js";
+import { hasSlotted } from "../lib/slots.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { JlButton } from "../atoms/jl-button.js";
+import jl_alert_default from "./jl-alert.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-alert.tsx
+registerIcons({
+	"circle-check": CircleCheck,
+	"circle-x": CircleX,
+	info: Info,
+	sparkles: Sparkles,
+	"triangle-alert": TriangleAlert,
+	x: X
+});
+var ICON_SIZE = 18;
+var NO_ICON = "none";
+/** Warnings and failures interrupt a screen reader; the other tones wait for a pause. */
+var TONE_ROLES = {
+	accent: "status",
+	danger: "alert",
+	info: "status",
+	neutral: "status",
+	ok: "status",
+	warn: "alert"
+};
+/**
+* A message in the flow of the page, coloured by its tone: a tip, a success, a warning, an error. The text goes
+* in the default slot, buttons in `slot="actions"`. A `dismissible` alert has an × that hides it.
+*/
+var JlAlert = class extends JlElement {
+	static selector = "jl-alert";
+	events = this.useEvents();
+	tone = this.useChange("info", (value) => {
+		this.reflect("tone", value);
+		this._refs.alert.setAttribute("role", TONE_ROLES[value]);
+		this.renderIcon();
+	}, {
+		attribute: "tone",
+		parse: oneOf(TONES, "info")
+	});
+	heading = this.useChange("", (value) => {
+		this._refs.heading.textContent = value;
+		this._refs.heading.hidden = value === "";
+	}, { attribute: "heading" });
+	/** An icon name in place of the tone's own; `none` shows no icon. */
+	icon = this.useChange("", () => this.renderIcon(), { attribute: "icon" });
+	/** Shows an × that hides the alert and fires `dismiss`. */
+	dismissible = this.useChange(false, (value) => {
+		this._refs.close.hidden = !value;
+		this.reflect("dismissible", value);
+	}, { attribute: "dismissible" });
+	_refs = this.useRefs((ref) => ({
+		actions: ref(".actions"),
+		actionsSlot: ref("slot[name=\"actions\"]"),
+		alert: ref(".alert"),
+		close: ref(".close"),
+		heading: ref(".heading"),
+		icon: ref(".icon")
+	}));
+	/** Hides the alert as its × does, and fires `dismiss`. */
+	dismiss() {
+		this.hidden = true;
+		this.events.emit("dismiss");
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "alert",
+			role: "status",
+			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("div", {
+							class: "text",
+							children: /* @__PURE__ */ jsx("slot", {})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							class: "actions",
+							hidden: true,
+							children: /* @__PURE__ */ jsx("slot", { name: "actions" })
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(JlButton, {
+					class: "close",
+					variant: "ghost",
+					icon: "x",
+					hint: "Dismiss",
+					size: "sm",
+					hidden: true
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_alert_default}`;
+	}
+	onConnect() {
+		this._refs.close.events.register("press", () => this.dismiss());
+		this.renderActions();
+		this.on(this._refs.actionsSlot, "slotchange", () => this.renderActions());
+	}
+	renderActions() {
+		this._refs.actions.hidden = !hasSlotted(this._refs.actionsSlot);
+	}
+	renderIcon() {
+		const own = this.icon.get();
+		const name = own === "" ? TONE_ICONS[this.tone.get()] : own;
+		this._refs.icon.name.set(name === NO_ICON ? "" : name);
+		this._refs.icon.hidden = name === NO_ICON;
+		this.reflect("has-icon", name !== NO_ICON);
+	}
+};
+JlAlert.register();
+export { JlAlert };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-avatar-group.css?raw
+var jl_avatar_group_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  --overlap: 6px;\n  --ring-color: var(--jl-surface);\n}\n\n:host([size=\"sm\"]) {\n  --overlap: 4px;\n}\n\n:host([size=\"lg\"]) {\n  --overlap: 8px;\n}\n\n:host([size=\"xl\"]) {\n  --overlap: 10px;\n}\n\n.group {\n  display: inline-flex;\n  align-items: center;\n  padding-left: var(--overlap);\n}\n\njl-avatar {\n  margin-left: calc(var(--overlap) * -1);\n  --ring: 2px;\n  --ring-color: inherit;\n}\n\n.more {\n  font-variant-numeric: tabular-nums;\n}\n";
+export { jl_avatar_group_default as default };

package/dist/molecules/jl-avatar-group.d.ts

@@ -0,0 +1,28 @@
+import { JlElement } from '../base/jl-element';
+import type { AvatarItem, AvatarSize } from '../types/jl-avatar.types';
+/**
+ * A few people at a glance: their avatars overlap, each ringed with the surface colour. Past `max`, a last
+ * avatar counts the others ("+3") and names them in its tooltip.
+ */
+export declare class JlAvatarGroup extends JlElement {
+    static readonly selector = "jl-avatar-group";
+    /** The people, in order: `[{ "name": "Ada Lovelace", "src": "/ada.jpg" }]`. */
+    readonly items: Readonly<Readonly<{
+        get(): AvatarItem[];
+        set(setter: AvatarItem[] | ((prevState: AvatarItem[]) => AvatarItem[])): void;
+    }>>;
+    /** How many avatars show before the count; 0 shows them all. */
+    readonly max: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly size: Readonly<Readonly<{
+        get(): AvatarSize;
+        set(setter: ((prevState: AvatarSize) => AvatarSize) | AvatarSize): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    private render;
+    private countAvatar;
+}

package/dist/molecules/jl-avatar-group.js

@@ -0,0 +1,69 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf, oneOf } from "../lib/attributes.js";
+import { splitVisible } from "../lib/avatar.js";
+import { AVATAR_SIZES, JlAvatar } from "../atoms/jl-avatar.js";
+import jl_avatar_group_default from "./jl-avatar-group.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-avatar-group.tsx
+var NAME_SEPARATOR = ", ";
+/**
+* A few people at a glance: their avatars overlap, each ringed with the surface colour. Past `max`, a last
+* avatar counts the others ("+3") and names them in its tooltip.
+*/
+var JlAvatarGroup = class extends JlElement {
+	static selector = "jl-avatar-group";
+	/** The people, in order: `[{ "name": "Ada Lovelace", "src": "/ada.jpg" }]`. */
+	items = this.useChange([], () => this.render(), {
+		attribute: "items",
+		parse: jsonOf([])
+	});
+	/** How many avatars show before the count; 0 shows them all. */
+	max = this.useChange(0, () => this.render(), { attribute: "max" });
+	size = this.useChange("md", (value) => {
+		this.reflect("size", value);
+		this.render();
+	}, {
+		attribute: "size",
+		parse: oneOf(AVATAR_SIZES, "md")
+	});
+	_refs = this.useRefs((ref) => ({ group: ref(".group") }));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("div", {
+			class: "group",
+			role: "group",
+			attrs: { part: "base" }
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_avatar_group_default}`;
+	}
+	render() {
+		const items = this.items.get().filter((item) => typeof item?.name === "string");
+		const { shown, hidden } = splitVisible(items, this.max.get());
+		const size = this.size.get();
+		const avatars = shown.map((item) => /* @__PURE__ */ jsx(JlAvatar, {
+			name: item.name,
+			src: item.src ?? "",
+			size,
+			title: item.name
+		}));
+		const more = hidden.length === 0 ? [] : [this.countAvatar(hidden, size)];
+		this._refs.group.replaceChildren(...avatars, ...more);
+		this._refs.group.setAttribute("aria-label", `${items.length} ${items.length === 1 ? "person" : "people"}`);
+	}
+	countAvatar(hidden, size) {
+		const names = hidden.map((item) => item.name).join(NAME_SEPARATOR);
+		const avatar = /* @__PURE__ */ jsx(JlAvatar, {
+			class: "more",
+			size,
+			label: `${hidden.length} more: ${names}`
+		});
+		avatar.title = names;
+		avatar.textContent = `+${hidden.length}`;
+		return avatar;
+	}
+};
+JlAvatarGroup.register();
+export { JlAvatarGroup };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-breadcrumb.css?raw
+var jl_breadcrumb_default = ":host {\n  display: block;\n}\n\nol {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--jl-font-sm);\n  line-height: 20px;\n}\n\nli {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.separator {\n  margin: 0 6px;\n  color: var(--jl-faint);\n}\n\n.crumb {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  padding: 2px 4px;\n  border-radius: var(--jl-radius-xs);\n  color: var(--jl-muted);\n  text-decoration: none;\n}\n\na.crumb:hover {\n  color: var(--jl-text);\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n\n.crumb[aria-current=\"page\"] {\n  color: var(--jl-text);\n  font-weight: 600;\n}\n\n.label {\n  max-width: 24ch;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.more {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 22px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: var(--jl-muted);\n  cursor: pointer;\n}\n\n.more:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n/* The first crumb's text lines up with what is under the trail, its padding hanging out to the left. */\nli:first-child .crumb {\n  margin-left: -4px;\n}\n";
+export { jl_breadcrumb_default as default };

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

@@ -0,0 +1,35 @@
+import { JlElement } from '../base/jl-element';
+import type { BreadcrumbItem } from '../types/jl-breadcrumb.types';
+/**
+ * Where the page sits in a hierarchy: a trail of links, the last one being the current page. With `max`, a long
+ * trail folds its middle into a button that unfolds it.
+ */
+export declare class JlBreadcrumb extends JlElement {
+    static readonly selector = "jl-breadcrumb";
+    readonly items: Readonly<Readonly<{
+        get(): BreadcrumbItem[];
+        set(setter: BreadcrumbItem[] | ((prevState: BreadcrumbItem[]) => BreadcrumbItem[])): void;
+    }>>;
+    /** The most items shown before the middle folds; 0 never folds. */
+    readonly max: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The trail's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _state;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** A new trail starts folded. */
+    private renderTrail;
+    private render;
+    private crumb;
+    private moreButton;
+    /** Unfolds the middle, and moves the focus to the first item it showed. */
+    private expand;
+}

package/dist/molecules/jl-breadcrumb.js

@@ -0,0 +1,126 @@
+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 { JlIcon } from "../atoms/jl-icon.js";
+import jl_breadcrumb_default from "./jl-breadcrumb.css_raw.js";
+import { css } from "@jadis/core";
+import { ChevronRight, Ellipsis } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-breadcrumb.tsx
+registerIcons({
+	"chevron-right": ChevronRight,
+	ellipsis: Ellipsis
+});
+var ICON_SIZE = 15;
+var SEPARATOR_SIZE = 14;
+var DEFAULT_LABEL = "Breadcrumb";
+var MIN_MAX = 2;
+/** The crumbs shown: all of them, or the first, a gap for the middle, and the last `max - 1`. */
+function visibleCrumbs(items, max, expanded) {
+	const all = items.map((item, index) => ({
+		index,
+		item
+	}));
+	if (expanded || max < MIN_MAX || items.length <= max) return all;
+	const tail = all.slice(items.length - (max - 1));
+	return [
+		...all.slice(0, 1),
+		{ hidden: items.length - max },
+		...tail
+	];
+}
+/**
+* Where the page sits in a hierarchy: a trail of links, the last one being the current page. With `max`, a long
+* trail folds its middle into a button that unfolds it.
+*/
+var JlBreadcrumb = class extends JlElement {
+	static selector = "jl-breadcrumb";
+	items = this.useChange([], () => this.renderTrail(), {
+		attribute: "items",
+		parse: jsonOf([])
+	});
+	/** The most items shown before the middle folds; 0 never folds. */
+	max = this.useChange(0, () => this.render(), { attribute: "max" });
+	/** The trail's name for screen readers. */
+	label = this.useChange(DEFAULT_LABEL, (value) => {
+		this._refs.nav.setAttribute("aria-label", value || DEFAULT_LABEL);
+	}, { attribute: "label" });
+	_state = { expanded: false };
+	_refs = this.useRefs((ref) => ({
+		list: ref("ol"),
+		nav: ref("nav")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("nav", {
+			attrs: { part: "base" },
+			children: /* @__PURE__ */ jsx("ol", {})
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_breadcrumb_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.list, "click", (event) => {
+			if (event.target.closest(".more") !== null) this.expand();
+		});
+	}
+	/** A new trail starts folded. */
+	renderTrail() {
+		this._state.expanded = false;
+		this.render();
+	}
+	render() {
+		const items = this.items.get();
+		const crumbs = visibleCrumbs(items, this.max.get(), this._state.expanded);
+		const lastIndex = items.length - 1;
+		this._refs.list.replaceChildren(...crumbs.map((crumb, position) => /* @__PURE__ */ jsxs("li", { children: [position > 0 ? /* @__PURE__ */ jsx(JlIcon, {
+			class: "separator",
+			name: "chevron-right",
+			size: SEPARATOR_SIZE
+		}) : "", "hidden" in crumb ? this.moreButton(crumb.hidden) : this.crumb(crumb.item, crumb.index === lastIndex)] })));
+	}
+	crumb(item, current) {
+		const ariaCurrent = current ? "page" : void 0;
+		const content = [item.icon === void 0 ? "" : /* @__PURE__ */ jsx(JlIcon, {
+			name: item.icon,
+			size: ICON_SIZE
+		}), /* @__PURE__ */ jsx("span", {
+			class: "label",
+			children: item.label
+		})];
+		if (item.href === void 0) return /* @__PURE__ */ jsx("span", {
+			class: "crumb",
+			title: item.label,
+			"aria-current": ariaCurrent,
+			children: content
+		});
+		return /* @__PURE__ */ jsx("a", {
+			class: "crumb",
+			href: item.href,
+			title: item.label,
+			"aria-current": ariaCurrent,
+			children: content
+		});
+	}
+	moreButton(hidden) {
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			class: "more",
+			"aria-label": `Show ${hidden} more`,
+			title: `Show ${hidden} more`,
+			children: /* @__PURE__ */ jsx(JlIcon, {
+				name: "ellipsis",
+				size: ICON_SIZE
+			})
+		});
+	}
+	/** Unfolds the middle, and moves the focus to the first item it showed. */
+	expand() {
+		this._state.expanded = true;
+		this.render();
+		this._refs.list.querySelector("li:nth-child(2) .crumb")?.focus();
+	}
+};
+JlBreadcrumb.register();
+export { JlBreadcrumb };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-calendar.css?raw
+var jl_calendar_default = ":host {\n  display: inline-block;\n  vertical-align: top;\n  --cell: 36px;\n}\n\n:host([size=\"sm\"]) {\n  --cell: 32px;\n}\n\n:host([size=\"lg\"]) {\n  --cell: 42px;\n}\n\n.calendar {\n  display: inline-grid;\n  gap: 6px;\n  padding: 12px;\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}\n\n:host([invalid]) .calendar {\n  border-color: var(--jl-danger);\n}\n\nheader {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.title {\n  flex: 1;\n  font-size: var(--jl-font-md);\n  font-weight: 650;\n  text-align: center;\n}\n\n/* \"octobre 2026\": a title starts with a capital, whatever the locale writes. */\n.title::first-letter {\n  text-transform: uppercase;\n}\n\n.nav {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-sm);\n  background: none;\n  color: var(--jl-text-2);\n  cursor: pointer;\n}\n\n.nav:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.nav:disabled {\n  background: none;\n  color: var(--jl-faint);\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\nth {\n  width: var(--cell);\n  height: 28px;\n  padding: 0;\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 600;\n  text-align: center;\n}\n\ntd {\n  width: var(--cell);\n  height: var(--cell);\n  padding: 2px;\n  text-align: center;\n  cursor: pointer;\n}\n\n.number {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--jl-radius-sm);\n  font-size: var(--jl-font-sm);\n  font-variant-numeric: tabular-nums;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    color var(--jl-fast) var(--jl-ease);\n}\n\ntd:hover .number {\n  background: var(--jl-surface-3);\n}\n\ntd:focus-visible {\n  box-shadow: none;\n}\n\ntd:focus-visible .number {\n  box-shadow: var(--jl-focus-ring);\n}\n\ntd.outside .number {\n  color: var(--jl-muted);\n}\n\ntd[aria-current=\"date\"] .number {\n  color: var(--jl-accent);\n  font-weight: 700;\n  box-shadow: inset 0 0 0 1px var(--jl-accent-line);\n}\n\ntd[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n}\n\ntd[aria-disabled=\"true\"] .number {\n  background: none;\n  color: var(--jl-faint);\n  text-decoration: line-through;\n  text-decoration-color: color-mix(in srgb, var(--jl-faint) 60%, transparent);\n}\n\ntd[aria-selected=\"true\"] .number {\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n  font-weight: 650;\n}\n\n:host([disabled]) .calendar {\n  opacity: 0.55;\n}\n\n:host([disabled]) td {\n  cursor: not-allowed;\n}\n\n:host([disabled]) td:hover .number {\n  background: none;\n}\n";
+export { jl_calendar_default as default };

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

@@ -0,0 +1,101 @@
+import { JlFormControl } from '../base/jl-form-control';
+import type { Weekday } from '../types/calendar.types';
+import type { ControlSize } from '../types/options.types';
+/**
+ * A month to pick a day from. Arrows move by day and week, Page Up and Page Down by month (by year with Shift),
+ * Home and End to the ends of the week, Enter chooses. Month and weekday names follow the `locale`; days outside
+ * `min` and `max` cannot be chosen. `value` is an ISO date (`2026-10-25`).
+ */
+export declare class JlCalendar extends JlFormControl {
+    static readonly selector = "jl-calendar";
+    /** `change` when the chosen day changes; `pick` each time a day is chosen, even the one already chosen. */
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string;
+        pick: string;
+    }>>;
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The first day that can be chosen, as an ISO date. */
+    readonly min: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The last day that can be chosen, as an ISO date. */
+    readonly max: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The day weeks start on: 0 for Sunday, 1 for Monday, up to 6 for Saturday. */
+    readonly firstDay: Readonly<Readonly<{
+        get(): Weekday;
+        set(setter: ((prevState: Weekday) => Weekday) | Weekday): void;
+    }>>;
+    /** The language of month and weekday names: `fr-CH`. The page's language by default. */
+    readonly locale: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The calendar's name for screen readers; the month's title names it otherwise. */
+    readonly label: 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 frame in the danger colour, for an error the page found itself. */
+    readonly invalid: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The size of the days: 32, 36 or 42 pixels. */
+    readonly size: Readonly<Readonly<{
+        get(): ControlSize;
+        set(setter: ((prevState: ControlSize) => ControlSize) | ControlSize): void;
+    }>>;
+    private readonly _titleId;
+    /** The month shown, and the day the arrows move from (the one focusable cell of the grid). */
+    private readonly _state;
+    private readonly _refs;
+    /** Focuses the day the arrows move from: the chosen one, or today, or the first of the month. */
+    focus(options?: FocusOptions): void;
+    /** Shows the month of a date (ISO), without choosing it. */
+    showMonth(iso: string): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    protected resetValue(): void;
+    protected setDisabledByForm(disabled: boolean): void;
+    private bounds;
+    private isOff;
+    private onDayClick;
+    private onKey;
+    /** Moves the focus to a day, turning the page when it is in another month. */
+    private moveFocus;
+    private turnPage;
+    private choose;
+    /** A new value: its month shows, the focus moves to it, and the form gets it (or nothing, when unreadable). */
+    private renderValue;
+    /** The month shown, moved to the nearest one with days that can be chosen: today may be before `min`. */
+    private viewWithin;
+    /** The day the grid lets focus on: the remembered one when it is on the page, else the first day it can. */
+    private rovingDate;
+    private renderPage;
+    /** The title is a live region: written only when the month changes, so it is announced once. */
+    private renderTitle;
+    private renderWeekdays;
+    private dayCell;
+    /** Only the remembered day is in the tab order: the arrows reach the others. */
+    private renderFocus;
+    /** The arrows of the header stop where no day of the next month could be chosen. */
+    private renderNavigation;
+    private renderValidity;
+    private renderDisabled;
+}