@syware/jlib 0.0.0-stage → 0.1.3

package/dist/molecules/jl-calendar.js

@@ -0,0 +1,314 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlFormControl } from "../base/jl-form-control.js";
+import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { CONTROL_SIZES } from "../lib/options.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { addMonths, calendarDateOf, clampDate, dateAfterKey, dateFormatter, formatMonthTitle, isSameDate, isSameMonth, isWithin, monthGrid, monthHasDaysWithin, parseIsoDate, toIsoDate, weekdayNames } from "../lib/calendar.js";
+import { pageLocale } from "../lib/locale.js";
+import jl_calendar_default from "./jl-calendar.css_raw.js";
+import { css } from "@jadis/core";
+import { ChevronLeft, ChevronRight } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-calendar.tsx
+registerIcons({
+	"chevron-left": ChevronLeft,
+	"chevron-right": ChevronRight
+});
+var NAV_ICON_SIZE = 16;
+var MONDAY = 1;
+var SUNDAY = 0;
+var SATURDAY = 6;
+var SELECT_KEYS = ["Enter", " "];
+var VALUE_MISSING = "Choose a date.";
+var FULL_DATE = { dateStyle: "full" };
+/** The first day of the week from its attribute: 0 (Sunday) to 6 (Saturday), Monday when absent. */
+var parseWeekday = (value) => Math.round(clampedNumber(MONDAY, SUNDAY, SATURDAY)(value));
+/**
+* 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`).
+*/
+var JlCalendar = class extends JlFormControl {
+	static selector = "jl-calendar";
+	/** `change` when the chosen day changes; `pick` each time a day is chosen, even the one already chosen. */
+	events = this.useEvents();
+	value = this.useChange("", () => this.renderValue(), { attribute: "value" });
+	/** The first day that can be chosen, as an ISO date. */
+	min = this.useChange("", () => this.renderPage(), { attribute: "min" });
+	/** The last day that can be chosen, as an ISO date. */
+	max = this.useChange("", () => this.renderPage(), { attribute: "max" });
+	/** The day weeks start on: 0 for Sunday, 1 for Monday, up to 6 for Saturday. */
+	firstDay = this.useChange(MONDAY, () => this.renderPage(), {
+		attribute: "first-day",
+		parse: parseWeekday
+	});
+	/** The language of month and weekday names: `fr-CH`. The page's language by default. */
+	locale = this.useChange("", () => this.renderPage(), { attribute: "locale" });
+	/** The calendar's name for screen readers; the month's title names it otherwise. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.base, "aria-label", value), { attribute: "label" });
+	required = this.useChange(false, () => this.renderValidity(), { attribute: "required" });
+	disabled = this.useChange(false, (value) => this.renderDisabled(value), { attribute: "disabled" });
+	/** Draws the frame in the danger colour, for an error the page found itself. */
+	invalid = this.useChange(false, (value) => this.reflect("invalid", value), { attribute: "invalid" });
+	/** The size of the days: 32, 36 or 42 pixels. */
+	size = this.useChange("md", (value) => this.reflect("size", value), {
+		attribute: "size",
+		parse: oneOf(CONTROL_SIZES, "md")
+	});
+	_titleId = uniqueId("jl-calendar-title");
+	/** The month shown, and the day the arrows move from (the one focusable cell of the grid). */
+	_state = {
+		focus: null,
+		formDisabled: false,
+		view: calendarDateOf(/* @__PURE__ */ new Date())
+	};
+	_refs = this.useRefs((ref) => ({
+		base: ref(".calendar"),
+		days: ref("tbody"),
+		grid: ref("table"),
+		next: ref(".next"),
+		previous: ref(".previous"),
+		title: ref(".title"),
+		weekdays: ref("thead tr")
+	}));
+	/** Focuses the day the arrows move from: the chosen one, or today, or the first of the month. */
+	focus(options) {
+		this._refs.days.querySelector("[tabindex=\"0\"]")?.focus(options);
+	}
+	/** Shows the month of a date (ISO), without choosing it. */
+	showMonth(iso) {
+		const date = parseIsoDate(iso);
+		if (date === null) return;
+		this._state.view = date;
+		this._state.focus = date;
+		this.whenRendered(() => this.renderPage());
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "calendar",
+			role: "group",
+			"aria-labelledby": this._titleId,
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("header", { children: [
+				/* @__PURE__ */ jsx("button", {
+					class: "nav previous",
+					type: "button",
+					"aria-label": "Previous month",
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "chevron-left",
+						size: NAV_ICON_SIZE
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "title",
+					id: this._titleId,
+					"aria-live": "polite"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					class: "nav next",
+					type: "button",
+					"aria-label": "Next month",
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "chevron-right",
+						size: NAV_ICON_SIZE
+					})
+				})
+			] }), /* @__PURE__ */ jsxs("table", {
+				role: "grid",
+				"aria-labelledby": this._titleId,
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {}) }), /* @__PURE__ */ jsx("tbody", {})]
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_calendar_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.previous, "click", () => this.turnPage(-1));
+		this.on(this._refs.next, "click", () => this.turnPage(1));
+		this.on(this._refs.days, "click", (event) => this.onDayClick(event));
+		this.on(this._refs.days, "keydown", (event) => this.onKey(event));
+	}
+	resetValue() {
+		this.value.set(this.getAttribute("value") ?? "");
+	}
+	setDisabledByForm(disabled) {
+		this._state.formDisabled = disabled;
+		this.whenRendered(() => this.renderDisabled(this.disabled.get()));
+	}
+	bounds() {
+		return {
+			max: parseIsoDate(this.max.get()),
+			min: parseIsoDate(this.min.get())
+		};
+	}
+	isOff() {
+		return this.disabled.get() || this._state.formDisabled;
+	}
+	onDayClick(event) {
+		const cell = event.target.closest("[data-date]");
+		const date = parseIsoDate(cell?.dataset.date ?? "");
+		if (date !== null) this.choose(date);
+	}
+	onKey(event) {
+		const focus = this._state.focus;
+		if (focus === null || this.isOff()) return;
+		if (SELECT_KEYS.includes(event.key)) {
+			event.preventDefault();
+			this.choose(focus);
+			return;
+		}
+		const next = dateAfterKey(focus, event.key, this.firstDay.get(), event.shiftKey);
+		if (next === null) return;
+		event.preventDefault();
+		const { min, max } = this.bounds();
+		this.moveFocus(clampDate(next, min, max));
+	}
+	/** Moves the focus to a day, turning the page when it is in another month. */
+	moveFocus(date) {
+		const turn = !isSameMonth(date, this._state.view);
+		this._state.focus = date;
+		if (turn) {
+			this._state.view = date;
+			this.renderPage();
+		} else this.renderFocus();
+		this.focus();
+	}
+	turnPage(months) {
+		const { min, max } = this.bounds();
+		const view = addMonths({
+			...this._state.view,
+			day: 1
+		}, months);
+		const focus = this._state.focus ?? view;
+		this._state.view = view;
+		this._state.focus = clampDate(addMonths(focus, months), min, max);
+		this.renderPage();
+	}
+	choose(date) {
+		const { min, max } = this.bounds();
+		if (!isWithin(date, min, max) || this.isOff()) return;
+		const iso = toIsoDate(date);
+		const changed = iso !== this.value.get();
+		this.value.set(iso);
+		this.focus();
+		this.events.emit("pick", iso);
+		if (changed) this.events.emit("change", iso);
+	}
+	/** A new value: its month shows, the focus moves to it, and the form gets it (or nothing, when unreadable). */
+	renderValue() {
+		const date = parseIsoDate(this.value.get());
+		if (date !== null) {
+			this._state.view = date;
+			this._state.focus = date;
+		}
+		this.internals.setFormValue(date === null ? "" : toIsoDate(date));
+		this.renderValidity();
+		this.renderPage();
+	}
+	/** The month shown, moved to the nearest one with days that can be chosen: today may be before `min`. */
+	viewWithin(min, max) {
+		const view = this._state.view;
+		return monthHasDaysWithin(view.year, view.month, min, max) ? view : clampDate(view, min, max);
+	}
+	/** The day the grid lets focus on: the remembered one when it is on the page, else the first day it can. */
+	rovingDate(min, max) {
+		const view = this._state.view;
+		const focus = this._state.focus ?? calendarDateOf(/* @__PURE__ */ new Date());
+		if (isSameMonth(focus, view) && isWithin(focus, min, max)) return focus;
+		return clampDate({
+			...view,
+			day: 1
+		}, min, max);
+	}
+	renderPage() {
+		const { min, max } = this.bounds();
+		this._state.view = this.viewWithin(min, max);
+		const { year, month } = this._state.view;
+		const locale = pageLocale(this.locale.get());
+		const firstDay = this.firstDay.get();
+		const context = {
+			focus: this.rovingDate(min, max),
+			label: dateFormatter(locale, FULL_DATE),
+			max,
+			min,
+			month,
+			selected: parseIsoDate(this.value.get()),
+			today: calendarDateOf(/* @__PURE__ */ new Date())
+		};
+		this._state.focus = context.focus;
+		this.renderTitle(formatMonthTitle(year, month, locale));
+		this.renderWeekdays(locale, firstDay);
+		this._refs.days.replaceChildren(...monthGrid(year, month, firstDay).map((week) => /* @__PURE__ */ jsx("tr", { children: week.map((date) => this.dayCell(date, context)) })));
+		this.renderNavigation(min, max);
+	}
+	/** The title is a live region: written only when the month changes, so it is announced once. */
+	renderTitle(text) {
+		const title = this._refs.title;
+		if (title.textContent !== text) title.textContent = text;
+	}
+	renderWeekdays(locale, firstDay) {
+		const short = weekdayNames(locale, firstDay, "short");
+		const long = weekdayNames(locale, firstDay, "long");
+		this._refs.weekdays.replaceChildren(...short.map((name, index) => /* @__PURE__ */ jsx("th", {
+			scope: "col",
+			abbr: long[index] ?? name,
+			children: name
+		})));
+	}
+	dayCell(date, context) {
+		const outside = date.month !== context.month;
+		const enabled = isWithin(date, context.min, context.max);
+		return /* @__PURE__ */ jsx("td", {
+			class: outside ? "day outside" : "day",
+			role: "gridcell",
+			tabIndex: isSameDate(date, context.focus) && !this.isOff() ? 0 : -1,
+			"data-date": toIsoDate(date),
+			"aria-label": context.label(date),
+			"aria-selected": String(isSameDate(date, context.selected)),
+			"aria-disabled": enabled ? void 0 : "true",
+			"aria-current": isSameDate(date, context.today) ? "date" : void 0,
+			children: /* @__PURE__ */ jsx("span", {
+				class: "number",
+				children: String(date.day)
+			})
+		});
+	}
+	/** Only the remembered day is in the tab order: the arrows reach the others. */
+	renderFocus() {
+		const focus = this._state.focus;
+		const iso = focus === null ? "" : toIsoDate(focus);
+		for (const cell of this._refs.days.querySelectorAll("[data-date]")) cell.tabIndex = cell.dataset.date === iso && !this.isOff() ? 0 : -1;
+	}
+	/** The arrows of the header stop where no day of the next month could be chosen. */
+	renderNavigation(min, max) {
+		const view = this._state.view;
+		const previous = addMonths({
+			...view,
+			day: 1
+		}, -1);
+		const next = addMonths({
+			...view,
+			day: 1
+		}, 1);
+		const off = this.isOff();
+		this._refs.previous.disabled = off || !monthHasDaysWithin(previous.year, previous.month, min, max);
+		this._refs.next.disabled = off || !monthHasDaysWithin(next.year, next.month, min, max);
+	}
+	renderValidity() {
+		if (this.required.get() && parseIsoDate(this.value.get()) === null) {
+			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING);
+			return;
+		}
+		this.internals.setValidity({});
+	}
+	renderDisabled(disabled) {
+		this.reflect("disabled", disabled);
+		this._refs.grid.toggleAttribute("aria-disabled", this.isOff());
+		this.renderPage();
+	}
+};
+JlCalendar.register();
+export { JlCalendar };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-card.css?raw
+var jl_card_default = ":host {\n  display: block;\n  --pad: 20px;\n  --edge: 20px;\n  --gap: 12px;\n  --radius: var(--jl-radius-lg);\n}\n\n:host([padding=\"none\"]) {\n  --pad: 0px;\n  --edge: 16px;\n}\n\n:host([padding=\"sm\"]) {\n  --pad: 12px;\n  --edge: 12px;\n  --gap: 8px;\n}\n\n:host([padding=\"lg\"]) {\n  --pad: 28px;\n  --edge: 28px;\n  --gap: 16px;\n}\n\n.card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--radius);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 1.55;\n  transition: border-color var(--jl-fast) var(--jl-ease);\n}\n\n:host([clickable]) .card {\n  cursor: pointer;\n}\n\n:host([clickable]) .card:hover {\n  border-color: var(--jl-accent-line);\n}\n\n/* The link covers the card, so a press anywhere follows it; the header actions and the footer sit above it. */\n.link {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  border-radius: inherit;\n}\n\n/* The card clips what overflows its corners, the link's own ring included: the card wears the ring instead. */\n.link:focus-visible {\n  box-shadow: none;\n}\n\n.card:has(.link:focus-visible) {\n  box-shadow: var(--jl-focus-ring);\n}\n\n.actions,\nfooter {\n  position: relative;\n  z-index: 2;\n}\n\n.media ::slotted(*) {\n  display: block;\n  width: 100%;\n}\n\n.media ::slotted(img) {\n  object-fit: cover;\n}\n\nheader {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: var(--edge) var(--edge) 0;\n}\n\n/* Actions without a heading sit in the top right corner, over the content, rather than on a row of their own. */\n:host([floating-actions]) header {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n}\n\n:host([has-header]:not([has-body])) header {\n  padding-bottom: var(--edge);\n}\n\n.titles {\n  display: grid;\n  flex: 1;\n  gap: 2px;\n  min-width: 0;\n}\n\nh3 {\n  font-size: var(--jl-font-lg);\n  font-weight: 650;\n  letter-spacing: -0.01em;\n  line-height: 1.35;\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: 6px;\n  margin: -4px -6px -4px 0;\n}\n\n.body {\n  flex: 1;\n  padding: var(--pad);\n}\n\n:host([has-header]) .body {\n  padding-top: var(--gap);\n}\n\n:host([has-header][padding=\"none\"]) .body {\n  margin-top: var(--gap);\n  padding-top: 0;\n  border-top: 1px solid var(--jl-line);\n}\n\nfooter {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px var(--edge);\n  border-top: 1px solid var(--jl-line);\n}\n\n:host(:not([has-body]):not([has-header])) footer {\n  border-top: 0;\n}\n";
+export { jl_card_default as default };

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

@@ -0,0 +1,46 @@
+import { JlElement } from '../base/jl-element';
+import type { CardPadding } from '../types/jl-card.types';
+export declare const CARD_PADDINGS: readonly CardPadding[];
+/**
+ * A flat surface that groups one subject: a heading and a description, the content, and optional media on top,
+ * actions in the header and a footer. With `href` the whole card is a link; with `interactive` it fires `press`.
+ */
+export declare class JlCard extends JlElement {
+    static readonly selector = "jl-card";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        press: 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;
+    }>>;
+    /** The room around the content; `none` leaves the body edge to edge, for a list or a table. */
+    readonly padding: Readonly<Readonly<{
+        get(): CardPadding;
+        set(setter: ((prevState: CardPadding) => CardPadding) | CardPadding): void;
+    }>>;
+    /** Can be focused and pressed as a whole: its border turns blue under the pointer, and it fires `press`. */
+    readonly interactive: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Makes the whole card a link, named by its heading. Actions and the footer stay pressable on their own. */
+    readonly href: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    focus(options?: FocusOptions): void;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** An interactive card without a link fires `press`; a link card leaves the press to the link. */
+    private pressable;
+    private renderInteraction;
+    /** Shows only the parts that have something in them, so an empty one leaves no gap. */
+    private renderSections;
+}

package/dist/molecules/jl-card.js

@@ -0,0 +1,172 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { oneOf } from "../lib/attributes.js";
+import { setOrRemove } from "../lib/dom.js";
+import { hasSlotted } from "../lib/slots.js";
+import { isActivationKey, startedOnControl } from "../lib/surface.js";
+import jl_card_default from "./jl-card.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-card.tsx
+var CARD_PADDINGS = [
+	"md",
+	"none",
+	"sm",
+	"lg"
+];
+var DEFAULT_LINK_NAME = "Open";
+/**
+* A flat surface that groups one subject: a heading and a description, the content, and optional media on top,
+* actions in the header and a footer. With `href` the whole card is a link; with `interactive` it fires `press`.
+*/
+var JlCard = class extends JlElement {
+	static selector = "jl-card";
+	events = this.useEvents();
+	heading = this.useChange("", (value) => {
+		this._refs.heading.textContent = value;
+		this._refs.heading.hidden = value === "";
+		this._refs.linkName.textContent = value || DEFAULT_LINK_NAME;
+		this.renderSections();
+	}, { attribute: "heading" });
+	description = this.useChange("", (value) => {
+		this._refs.description.textContent = value;
+		this._refs.description.hidden = value === "";
+		this.renderSections();
+	}, { attribute: "description" });
+	/** The room around the content; `none` leaves the body edge to edge, for a list or a table. */
+	padding = this.useChange("md", (value) => this.reflect("padding", value), {
+		attribute: "padding",
+		parse: oneOf(CARD_PADDINGS, "md")
+	});
+	/** Can be focused and pressed as a whole: its border turns blue under the pointer, and it fires `press`. */
+	interactive = this.useChange(false, () => this.renderInteraction(), { attribute: "interactive" });
+	/** Makes the whole card a link, named by its heading. Actions and the footer stay pressable on their own. */
+	href = this.useChange("", () => this.renderInteraction(), { attribute: "href" });
+	_refs = this.useRefs((ref) => ({
+		actions: ref(".actions"),
+		actionsSlot: ref("slot[name=\"actions\"]"),
+		body: ref(".body"),
+		bodySlot: ref("slot:not([name])"),
+		card: ref(".card"),
+		description: ref(".description"),
+		footer: ref("footer"),
+		footerSlot: ref("slot[name=\"footer\"]"),
+		header: ref("header"),
+		heading: ref("h3"),
+		link: ref(".link"),
+		linkName: ref(".link-name"),
+		media: ref(".media"),
+		mediaSlot: ref("slot[name=\"media\"]")
+	}));
+	focus(options) {
+		(this.href.get() === "" ? this._refs.card : this._refs.link).focus(options);
+	}
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("article", {
+			class: "card",
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("a", {
+					class: "link",
+					"aria-describedby": "description",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("span", { class: "link-name sr-only" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "media",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", { name: "media" })
+				}),
+				/* @__PURE__ */ jsxs("header", {
+					hidden: true,
+					children: [/* @__PURE__ */ jsxs("div", {
+						class: "titles",
+						children: [/* @__PURE__ */ jsx("h3", {
+							id: "heading",
+							hidden: true
+						}), /* @__PURE__ */ jsx("p", {
+							class: "description",
+							id: "description",
+							hidden: true
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						class: "actions",
+						children: /* @__PURE__ */ jsx("slot", { name: "actions" })
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "body",
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", {})
+				}),
+				/* @__PURE__ */ jsx("footer", {
+					hidden: true,
+					children: /* @__PURE__ */ jsx("slot", { name: "footer" })
+				})
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_card_default}`;
+	}
+	onConnect() {
+		const card = this._refs.card;
+		this.renderSections();
+		const refs = this._refs;
+		for (const slot of [
+			refs.mediaSlot,
+			refs.actionsSlot,
+			refs.bodySlot,
+			refs.footerSlot
+		]) this.on(slot, "slotchange", () => this.renderSections());
+		this.on(card, "click", (event) => {
+			if (this.pressable() && !startedOnControl(event, card)) this.events.emit("press");
+		});
+		this.on(card, "keydown", (event) => {
+			if (this.pressable() && event.composedPath()[0] === card && isActivationKey(event)) {
+				event.preventDefault();
+				this.events.emit("press");
+			}
+		});
+	}
+	/** An interactive card without a link fires `press`; a link card leaves the press to the link. */
+	pressable() {
+		return this.interactive.get() && this.href.get() === "";
+	}
+	renderInteraction() {
+		const href = this.href.get();
+		const card = this._refs.card;
+		const link = this._refs.link;
+		const pressable = this.pressable();
+		setOrRemove(link, "href", href);
+		link.hidden = href === "";
+		this.reflect("clickable", this.interactive.get() || href !== "");
+		this.reflect("linked", href !== "");
+		if (!pressable) {
+			card.removeAttribute("tabindex");
+			card.removeAttribute("role");
+			card.removeAttribute("aria-labelledby");
+			return;
+		}
+		card.tabIndex = 0;
+		card.setAttribute("role", "button");
+		card.setAttribute("aria-labelledby", "heading");
+	}
+	/** Shows only the parts that have something in them, so an empty one leaves no gap. */
+	renderSections() {
+		const refs = this._refs;
+		const hasActions = hasSlotted(refs.actionsSlot);
+		const hasTitles = this.heading.get() !== "" || this.description.get() !== "";
+		const hasBody = hasSlotted(refs.bodySlot);
+		refs.header.hidden = !(hasTitles || hasActions);
+		refs.actions.hidden = !hasActions;
+		refs.media.hidden = !hasSlotted(refs.mediaSlot);
+		refs.body.hidden = !hasBody;
+		refs.footer.hidden = !hasSlotted(refs.footerSlot);
+		this.reflect("has-header", hasTitles);
+		this.reflect("floating-actions", hasActions && !hasTitles);
+		this.reflect("has-body", hasBody);
+	}
+};
+JlCard.register();
+export { CARD_PADDINGS, JlCard };

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

@@ -0,0 +1,3 @@
+// src/molecules/jl-code-block.css?raw
+var jl_code_block_default = ":host {\n  display: block;\n  min-width: 0;\n}\n\nfigure {\n  position: relative;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface-2);\n  overflow: hidden;\n}\n\nheader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: 38px;\n  padding: 0 52px 0 14px;\n  border-bottom: 1px solid var(--jl-line);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n}\n\n.heading {\n  overflow: hidden;\n  color: var(--jl-text-2);\n  font-family: var(--jl-font-mono);\n  font-weight: 500;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.language {\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\n.body {\n  display: flex;\n  min-width: 0;\n}\n\n.gutter,\npre {\n  padding: 14px 16px;\n  font-family: var(--jl-font-mono);\n  font-size: 12.5px;\n  line-height: 1.7;\n  font-variant-ligatures: no-contextual;\n}\n\n.gutter {\n  flex: none;\n  padding-right: 4px;\n  color: var(--jl-faint);\n  text-align: right;\n  white-space: pre;\n  user-select: none;\n}\n\npre {\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n  padding-right: 48px;\n  overflow-x: auto;\n  color: var(--jl-text);\n  tab-size: 2;\n}\n\n:host([wrap]) pre {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.copy {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  background: var(--jl-surface-2);\n  border-radius: var(--jl-radius-sm);\n}\n\n:host(:not([has-header])) .copy {\n  opacity: 0.6;\n  transition: opacity var(--jl-fast) var(--jl-ease);\n}\n\n:host(:not([has-header])) figure:hover .copy,\n.copy:focus-within {\n  opacity: 1;\n}\n\n.tok-comment {\n  color: var(--jl-code-comment);\n  font-style: italic;\n}\n\n.tok-string {\n  color: var(--jl-code-string);\n}\n\n.tok-number {\n  color: var(--jl-code-number);\n}\n\n.tok-keyword {\n  color: var(--jl-code-keyword);\n}\n\n.tok-tag {\n  color: var(--jl-code-tag);\n}\n\n.tok-attribute {\n  color: var(--jl-code-attribute);\n}\n\n.tok-property {\n  color: var(--jl-code-property);\n}\n\n.tok-function {\n  color: var(--jl-code-function);\n}\n\n.tok-punctuation {\n  color: var(--jl-muted);\n}\n";
+export { jl_code_block_default as default };

package/dist/molecules/jl-code-block.d.ts

@@ -0,0 +1,44 @@
+import { JlElement } from '../base/jl-element';
+import type { CodeLanguage } from '../types/highlight.types';
+export declare const CODE_LANGUAGES: readonly CodeLanguage[];
+/**
+ * Source code, coloured, with a button to copy it. The code is the `code` property, or the element's own text
+ * (a `<template>` inside keeps HTML as text): `<jl-code-block language="ts">const a = 1;</jl-code-block>`.
+ */
+export declare class JlCodeBlock extends JlElement {
+    static readonly selector = "jl-code-block";
+    readonly code: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly language: Readonly<Readonly<{
+        get(): CodeLanguage;
+        set(setter: ((prevState: CodeLanguage) => CodeLanguage) | CodeLanguage): void;
+    }>>;
+    /** A file name or a title over the code. */
+    readonly heading: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly lineNumbers: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    readonly hideCopy: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Wraps long lines instead of scrolling sideways. */
+    readonly wrap: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    /** The code shown: the `code` input, or else the text the page wrote inside the element. */
+    private source;
+    private render;
+    private renderGutter;
+    private renderHeader;
+}