@syware/jlib 0.3.0 → 0.5.0

package/dist/organisms/jl-confirm.js

@@ -129,4 +129,25 @@ function confirmDialog(options) {
 	document.body.append(element);
 	return element.ask().finally(() => element.remove());
 }
-export { CONFIRM_TONES, JlConfirm, confirmDialog };
+var LEAVE_HEADING = "Leave without saving?";
+var LEAVE_TEXT = "Your changes are lost.";
+var LEAVE_LABEL = "Leave";
+var STAY_LABEL = "Keep editing";
+/**
+* Guards a form or an editor against leaving with changes not saved. Closing or reloading the tab asks the
+* browser's own question; the function it returns asks in the page, for the app's router to call before it moves
+* on: `if (!(await canLeave())) return;`. It resolves `true` at once when nothing would be lost.
+*/
+function guardLeave(options) {
+	window.addEventListener("beforeunload", (event) => {
+		if (options.isDirty()) event.preventDefault();
+	}, { signal: options.signal });
+	return async () => !options.isDirty() || confirmDialog({
+		cancelLabel: options.stayLabel ?? STAY_LABEL,
+		confirmLabel: options.leaveLabel ?? LEAVE_LABEL,
+		heading: options.heading ?? LEAVE_HEADING,
+		text: options.text ?? LEAVE_TEXT,
+		tone: "danger"
+	});
+}
+export { CONFIRM_TONES, JlConfirm, confirmDialog, guardLeave };

package/dist/organisms/jl-tab-bar.css_raw.js

@@ -0,0 +1,3 @@
+// src/organisms/jl-tab-bar.css?raw
+var jl_tab_bar_default = ":host {\n  display: block;\n  --height: 60px;\n}\n\nnav {\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  min-height: var(--height);\n  /* Clear of the home indicator on phones without a button. */\n  padding-bottom: env(safe-area-inset-bottom);\n  border-top: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n/* The items and the \"more\" button share the bar's columns. */\n.items {\n  display: contents;\n}\n\n.item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  min-width: 0;\n  padding: 6px 2px;\n  border: none;\n  background: none;\n  color: var(--jl-muted);\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1.4;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color var(--jl-fast) var(--jl-ease);\n}\n\n.item:hover {\n  color: var(--jl-text);\n}\n\n.item[aria-current=\"page\"] {\n  color: var(--jl-accent);\n}\n\n/* The ring goes round the icon's pill: round the whole column, it would touch the bar's edges. */\n.item:focus-visible {\n  box-shadow: none;\n}\n\n.icon {\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  width: 52px;\n  height: 28px;\n  border-radius: var(--jl-radius-pill);\n  transition: background var(--jl-fast) var(--jl-ease);\n}\n\n.item:focus-visible .icon {\n  box-shadow: var(--jl-focus-ring);\n}\n\n/* The current item is told by a shape too, not by its colour alone. */\n.item[aria-current=\"page\"] .icon {\n  background: var(--jl-accent-soft);\n}\n\n.label {\n  max-width: 100%;\n  padding: 0 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.badge {\n  position: absolute;\n  top: -4px;\n  left: calc(50% + 4px);\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border: 2px solid var(--jl-surface);\n  border-radius: var(--jl-radius-pill);\n  background: var(--jl-accent);\n  color: var(--jl-on-accent);\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 14px;\n  text-align: center;\n}\n";
+export { jl_tab_bar_default as default };

package/dist/organisms/jl-tab-bar.d.ts

@@ -0,0 +1,43 @@
+import { JlElement } from '../base/jl-element';
+import type { TabBarItem } from '../types/jl-tab-bar.types';
+/**
+ * The bar along the bottom of a phone, under the thumb: the three to five main places of an app, an icon over a
+ * label, one tap away. `value` is the current item. Items with an `href` are links; the others are buttons; both
+ * fire `select`. `more` adds a last button for everything else, which fires `more`: in a `jl-app-shell`, it opens
+ * the navigation drawer.
+ */
+export declare class JlTabBar extends JlElement {
+    static readonly selector = "jl-tab-bar";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        select: string;
+        more: undefined;
+    }>>;
+    readonly items: Readonly<Readonly<{
+        get(): TabBarItem[];
+        set(setter: TabBarItem[] | ((prevState: TabBarItem[]) => TabBarItem[])): void;
+    }>>;
+    /** The id of the current item. */
+    readonly value: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The label of a last button for the other places (`More`); empty shows none. */
+    readonly more: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The name of the navigation for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private onClick;
+    private render;
+    private renderItem;
+    /** The current item says so: `aria-current="page"`, drawn in the accent. */
+    private renderCurrent;
+}

package/dist/organisms/jl-tab-bar.js

@@ -0,0 +1,123 @@
+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 jl_tab_bar_default from "./jl-tab-bar.css_raw.js";
+import { css } from "@jadis/core";
+import { Ellipsis } from "lucide";
+import { Fragment, jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-tab-bar.tsx
+registerIcons({ ellipsis: Ellipsis });
+var ICON_SIZE = 22;
+var DEFAULT_LABEL = "Shortcuts";
+var MAX_COUNT = 99;
+var ITEM_SELECTOR = ".item";
+/** A JSON attribute that should hold a list of items; anything else gives none. */
+var parseItems = (value) => {
+	const parsed = jsonOf([])(value);
+	return Array.isArray(parsed) ? parsed : [];
+};
+/** What the badge shows: counts are capped so they fit over the icon. */
+var badgeText = (badge) => {
+	if (typeof badge === "number") return badge > MAX_COUNT ? `${MAX_COUNT}+` : String(badge);
+	return badge ?? "";
+};
+/**
+* The bar along the bottom of a phone, under the thumb: the three to five main places of an app, an icon over a
+* label, one tap away. `value` is the current item. Items with an `href` are links; the others are buttons; both
+* fire `select`. `more` adds a last button for everything else, which fires `more`: in a `jl-app-shell`, it opens
+* the navigation drawer.
+*/
+var JlTabBar = class extends JlElement {
+	static selector = "jl-tab-bar";
+	events = this.useEvents();
+	items = this.useChange([], () => this.render(), {
+		attribute: "items",
+		parse: parseItems
+	});
+	/** The id of the current item. */
+	value = this.useChange("", (value) => this.renderCurrent(value), { attribute: "value" });
+	/** The label of a last button for the other places (`More`); empty shows none. */
+	more = this.useChange("", (value) => {
+		this._refs.moreLabel.textContent = value;
+		this._refs.more.hidden = value === "";
+	}, { attribute: "more" });
+	/** The name of the navigation for screen readers. */
+	label = this.useChange(DEFAULT_LABEL, (value) => this._refs.nav.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value), { attribute: "label" });
+	_refs = this.useRefs((ref) => ({
+		items: ref(".items"),
+		more: ref(".more"),
+		moreLabel: ref(".more .label"),
+		nav: ref("nav")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("nav", {
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("div", { class: "items" }), /* @__PURE__ */ jsxs("button", {
+				class: "item more",
+				type: "button",
+				hidden: true,
+				children: [/* @__PURE__ */ jsx("span", {
+					class: "icon",
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "ellipsis",
+						size: ICON_SIZE
+					})
+				}), /* @__PURE__ */ jsx("span", { class: "label" })]
+			})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_tab_bar_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.items, "click", (event) => this.onClick(event));
+		this.on(this._refs.more, "click", () => this.events.emit("more"));
+	}
+	onClick(event) {
+		const id = event.target.closest(ITEM_SELECTOR)?.dataset.id;
+		if (id === void 0) return;
+		this.value.set(id);
+		this.events.emit("select", id);
+	}
+	render() {
+		this._refs.items.replaceChildren(...this.items.get().map((item) => this.renderItem(item)));
+		this.renderCurrent(this.value.get());
+	}
+	renderItem(item) {
+		const badge = badgeText(item.badge);
+		const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			class: "icon",
+			children: [/* @__PURE__ */ jsx(JlIcon, {
+				name: item.icon,
+				size: ICON_SIZE
+			}), badge === "" ? null : /* @__PURE__ */ jsx("span", {
+				class: "badge",
+				children: badge
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			class: "label",
+			children: item.label
+		})] });
+		if (item.href === void 0) return /* @__PURE__ */ jsx("button", {
+			class: "item",
+			type: "button",
+			"data-id": item.id,
+			children: content
+		});
+		return /* @__PURE__ */ jsx("a", {
+			class: "item",
+			href: item.href,
+			"data-id": item.id,
+			children: content
+		});
+	}
+	/** The current item says so: `aria-current="page"`, drawn in the accent. */
+	renderCurrent(value) {
+		for (const item of this._refs.items.querySelectorAll(ITEM_SELECTOR)) setOrRemove(item, "aria-current", item.dataset.id === value ? "page" : "");
+	}
+};
+JlTabBar.register();
+export { JlTabBar };

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

@@ -24,7 +24,10 @@ export declare class JlToaster extends JlElement {
     }>>;
     private readonly _watched;
     private readonly _refs;
-    /** Shows a notification; `duration` is 5 seconds unless given, and it has a close button unless told not to. */
+    /**
+     * Shows a notification. It stays 5 seconds unless `duration` says otherwise, 8 for an error or with an action;
+     * it has a close button unless told not to.
+     */
     notify(options: ToastOptions): ToastHandle;
     templateHtml(): Node;
     templateCss(): string;

package/dist/organisms/jl-toaster.js

@@ -16,8 +16,12 @@ var TOASTER_PLACEMENTS = [
 var DEFAULT_MAX = 3;
 var MAX_LIMIT = 20;
 var DEFAULT_DURATION = 5e3;
+var LONG_DURATION = 8e3;
+var LONG_TONE = "danger";
 var DEFAULT_LABEL = "Notifications";
 var STACKED = "data-stacked";
+/** How long a toast stays when its options do not say: longer for an error, or to give time to press its action. */
+var defaultDuration = (options) => options.tone === LONG_TONE || (options.actionLabel ?? "") !== "" ? LONG_DURATION : DEFAULT_DURATION;
 var OPEN = ":popover-open";
 /**
 * The corner of the window where notifications stack, newest nearest the edge, at most `max` at a time. It lives in
@@ -42,14 +46,17 @@ var JlToaster = class extends JlElement {
 		region: ref(".region"),
 		slot: ref("slot")
 	}));
-	/** Shows a notification; `duration` is 5 seconds unless given, and it has a close button unless told not to. */
+	/**
+	* Shows a notification. It stays 5 seconds unless `duration` says otherwise, 8 for an error or with an action;
+	* it has a close button unless told not to.
+	*/
 	notify(options) {
 		const toast = /* @__PURE__ */ jsx(JlToast, {
 			heading: options.heading,
 			text: options.text,
 			tone: options.tone,
 			icon: options.icon,
-			duration: options.duration ?? DEFAULT_DURATION,
+			duration: options.duration ?? defaultDuration(options),
 			closable: options.closable ?? true,
 			actionLabel: options.actionLabel
 		});

package/dist/styles/control.css_raw.js

@@ -1,3 +1,3 @@
 // src/styles/control.css?raw
-var control_default = "/* The look of the fields people type in: text fields, selects and areas share it. */\n.control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  min-height: var(--height, var(--jl-control-md));\n  padding: 0 12px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.control:hover {\n  border-color: color-mix(in srgb, var(--jl-line-strong) 60%, var(--jl-text) 18%);\n}\n\n.control:focus-within {\n  border-color: var(--jl-accent);\n  box-shadow: var(--jl-focus-ring);\n}\n\n:host([invalid]) .control {\n  border-color: var(--jl-danger);\n}\n\n:host([invalid]) .control:focus-within {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-danger) 25%, transparent);\n}\n\n:host([disabled]) .control,\n:host(:disabled) .control {\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  cursor: not-allowed;\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n}\n\n/* The native element inside the frame: it takes the room and leaves the frame to draw the border. */\n.native {\n  flex: 1;\n  min-width: 0;\n  height: calc(var(--height, var(--jl-control-md)) - 2px);\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n\n.native::placeholder {\n  color: var(--jl-faint);\n}\n\n.native:focus-visible {\n  box-shadow: none;\n}\n\n.native:disabled {\n  cursor: not-allowed;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  color: var(--jl-faint);\n}\n\n/* A small button inside the frame: clear, reveal the password, step a number. */\n.action {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  margin-right: -4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.action:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n";
+var control_default = "/* The look of the fields people type in: text fields, selects and areas share it. */\n.control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  min-height: var(--height, var(--jl-control-md));\n  padding: 0 12px;\n  border: 1px solid var(--jl-line-strong);\n  border-radius: var(--jl-radius-sm);\n  background: var(--jl-surface);\n  color: var(--jl-text);\n  font-size: var(--jl-control-font);\n  line-height: 20px;\n  transition:\n    border-color var(--jl-fast) var(--jl-ease),\n    box-shadow var(--jl-fast) var(--jl-ease);\n}\n\n.control:hover {\n  border-color: color-mix(in srgb, var(--jl-line-strong) 60%, var(--jl-text) 18%);\n}\n\n.control:focus-within {\n  border-color: var(--jl-accent);\n  box-shadow: var(--jl-focus-ring);\n}\n\n:host([invalid]) .control {\n  border-color: var(--jl-danger);\n}\n\n:host([invalid]) .control:focus-within {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jl-danger) 25%, transparent);\n}\n\n:host([disabled]) .control,\n:host(:disabled) .control {\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  cursor: not-allowed;\n}\n\n:host([size=\"sm\"]) {\n  --height: var(--jl-control-sm);\n}\n\n:host([size=\"lg\"]) {\n  --height: var(--jl-control-lg);\n}\n\n/* The native element inside the frame: it takes the room and leaves the frame to draw the border. */\n.native {\n  flex: 1;\n  min-width: 0;\n  height: calc(var(--height, var(--jl-control-md)) - 2px);\n  padding: 0;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n\n.native::placeholder {\n  color: var(--jl-faint);\n}\n\n.native:focus-visible {\n  box-shadow: none;\n}\n\n.native:disabled {\n  cursor: not-allowed;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  color: var(--jl-faint);\n}\n\n/* A small button inside the frame: clear, reveal the password, step a number. */\n.action {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  margin-right: -4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: var(--jl-faint);\n  cursor: pointer;\n}\n\n.action:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n";
 export { control_default as default };

package/dist/styles/tokens.css_raw.js

@@ -1,3 +1,3 @@
 // src/styles/tokens.css?raw
-var tokens_default = "/*\n * The design tokens, as swai and swcode have them: ink and white, flat surfaces separated by lines, and one blue\n * that marks what is live, selected or waiting for a person. Custom properties cross shadow roots, so every\n * component reads them. They sit in the `jlib` layer: any unlayered rule of the page overrides them.\n */\n@layer jlib {\n  :root,\n  [data-theme=\"light\"] {\n    color-scheme: light;\n    --jl-font-sans: \"Manrope Variable\", \"Manrope\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    --jl-font-mono: \"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n\n    --jl-font-xs: 12px;\n    --jl-font-sm: 13px;\n    --jl-font-md: 14px;\n    --jl-font-lg: 16px;\n    --jl-font-xl: 20px;\n    --jl-font-2xl: 28px;\n\n    --jl-text: #0b0b0c;\n    --jl-text-2: #3a3f47;\n    /* Secondary text: 6.2:1 on white. */\n    --jl-muted: #5b616b;\n    /* Icons and decorations only: 3.2:1 on white is enough for them, not for text. */\n    --jl-faint: #8a9099;\n\n    --jl-bg: #ffffff;\n    --jl-surface: #ffffff;\n    --jl-surface-2: #f7f8f9;\n    --jl-surface-3: #eef0f2;\n    --jl-code-bg: #f0f2f4;\n    --jl-line: #e6e8eb;\n    --jl-line-soft: #eef0f2;\n    --jl-line-strong: #d5d9de;\n\n    /* The SyWare logo's blue: marks, focus rings, progress. 3.8:1 on white: enough for shapes, never for text. */\n    --jl-brand: #0e88d3;\n    /* The same hue, deep enough to carry text: buttons, links, the selection. 5.2:1 on white. */\n    --jl-accent: #0c72b0;\n    --jl-accent-strong: #095a8b;\n    --jl-accent-soft: #e9f4fb;\n    --jl-accent-line: #b7dbf2;\n    --jl-on-accent: #ffffff;\n\n    --jl-ok: #17784a;\n    --jl-ok-soft: #ecf6f0;\n    --jl-warn: #9a5b00;\n    --jl-warn-soft: #fcf4e6;\n    --jl-danger: #b42318;\n    --jl-danger-soft: #fdf0ef;\n    --jl-on-danger: #ffffff;\n    --jl-info: #0c72b0;\n    --jl-info-soft: #e9f4fb;\n\n    /* Code: the accent for keywords, quiet colours from the same family for the rest. */\n    --jl-code-keyword: #0c72b0;\n    --jl-code-tag: #095a8b;\n    --jl-code-attribute: #5b48c8;\n    --jl-code-string: #17784a;\n    --jl-code-number: #9a5b00;\n    --jl-code-function: #3d5a80;\n    --jl-code-property: #127a72;\n    --jl-code-comment: #8a9099;\n\n    --jl-radius-xs: 6px;\n    --jl-radius-sm: 8px;\n    --jl-radius: 10px;\n    --jl-radius-lg: 12px;\n    --jl-radius-xl: 20px;\n    --jl-radius-pill: 999px;\n\n    /* Spacing: a 4px grid, for the layouts pages build around the components. */\n    --jl-space-1: 4px;\n    --jl-space-2: 8px;\n    --jl-space-3: 12px;\n    --jl-space-4: 16px;\n    --jl-space-5: 20px;\n    --jl-space-6: 24px;\n    --jl-space-8: 32px;\n    --jl-space-10: 40px;\n    --jl-space-12: 48px;\n    --jl-space-16: 64px;\n\n    --jl-control-sm: 30px;\n    --jl-control-md: 36px;\n    --jl-control-lg: 44px;\n\n    /* Flat: lines separate; only what floats (menus, dialogs, toasts) casts a shadow. */\n    --jl-shadow-sm: 0 1px 2px rgb(11 11 12 / 0.05);\n    --jl-shadow: 0 6px 16px -6px rgb(11 11 12 / 0.12);\n    --jl-shadow-lg: 0 18px 44px -14px rgb(11 11 12 / 0.22);\n    --jl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jl-brand) 35%, transparent);\n    --jl-scrim: rgb(11 11 12 / 0.38);\n\n    --jl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);\n    --jl-fast: 120ms;\n    --jl-slow: 240ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme=\"light\"]) {\n      color-scheme: dark;\n      --jl-text: #eceef1;\n      --jl-text-2: #c3c8cf;\n      --jl-muted: #959ca6;\n      --jl-faint: #6b727c;\n      --jl-bg: #0f1113;\n      --jl-surface: #0f1113;\n      --jl-surface-2: #16191c;\n      --jl-surface-3: #1d2125;\n      --jl-code-bg: #1d2125;\n      --jl-line: #262a2f;\n      --jl-line-soft: #1f2327;\n      --jl-line-strong: #343a41;\n      --jl-brand: #1a9be0;\n      --jl-accent: #3ea6e8;\n      --jl-accent-strong: #6cc0f2;\n      --jl-accent-soft: #0f2a3b;\n      --jl-accent-line: #1e4a66;\n      --jl-on-accent: #04131c;\n      --jl-ok: #4cc38a;\n      --jl-ok-soft: #10261c;\n      --jl-warn: #e5a54b;\n      --jl-warn-soft: #2a2012;\n      --jl-danger: #f0786c;\n      --jl-danger-soft: #3a1a17;\n      --jl-on-danger: #1c0604;\n      --jl-info: #3ea6e8;\n      --jl-info-soft: #0f2a3b;\n      --jl-code-keyword: #3ea6e8;\n      --jl-code-tag: #6cc0f2;\n      --jl-code-attribute: #a99bf0;\n      --jl-code-string: #4cc38a;\n      --jl-code-number: #e5a54b;\n      --jl-code-function: #8fb0d6;\n      --jl-code-property: #4fc1b5;\n      --jl-code-comment: #6b727c;\n      --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n      --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n      --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n      --jl-scrim: rgb(0 0 0 / 0.55);\n    }\n  }\n\n  /* Dark: the same blue, lifted to read on a dark ground, with dark text on the buttons. */\n  [data-theme=\"dark\"] {\n    color-scheme: dark;\n    --jl-text: #eceef1;\n    --jl-text-2: #c3c8cf;\n    --jl-muted: #959ca6;\n    --jl-faint: #6b727c;\n    --jl-bg: #0f1113;\n    --jl-surface: #0f1113;\n    --jl-surface-2: #16191c;\n    --jl-surface-3: #1d2125;\n    --jl-code-bg: #1d2125;\n    --jl-line: #262a2f;\n    --jl-line-soft: #1f2327;\n    --jl-line-strong: #343a41;\n    --jl-brand: #1a9be0;\n    --jl-accent: #3ea6e8;\n    --jl-accent-strong: #6cc0f2;\n    --jl-accent-soft: #0f2a3b;\n    --jl-accent-line: #1e4a66;\n    --jl-on-accent: #04131c;\n    --jl-ok: #4cc38a;\n    --jl-ok-soft: #10261c;\n    --jl-warn: #e5a54b;\n    --jl-warn-soft: #2a2012;\n    --jl-danger: #f0786c;\n    --jl-danger-soft: #3a1a17;\n    --jl-on-danger: #1c0604;\n    --jl-info: #3ea6e8;\n    --jl-info-soft: #0f2a3b;\n    --jl-code-keyword: #3ea6e8;\n    --jl-code-tag: #6cc0f2;\n    --jl-code-attribute: #a99bf0;\n    --jl-code-string: #4cc38a;\n    --jl-code-number: #e5a54b;\n    --jl-code-function: #8fb0d6;\n    --jl-code-property: #4fc1b5;\n    --jl-code-comment: #6b727c;\n    --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n    --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n    --jl-scrim: rgb(0 0 0 / 0.55);\n  }\n}\n";
+var tokens_default = "/*\n * The design tokens, as swai and swcode have them: ink and white, flat surfaces separated by lines, and one blue\n * that marks what is live, selected or waiting for a person. Custom properties cross shadow roots, so every\n * component reads them. They sit in the `jlib` layer: any unlayered rule of the page overrides them.\n */\n@layer jlib {\n  :root,\n  [data-theme=\"light\"] {\n    color-scheme: light;\n    --jl-font-sans: \"Manrope Variable\", \"Manrope\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    --jl-font-mono: \"JetBrains Mono Variable\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n\n    --jl-font-xs: 12px;\n    --jl-font-sm: 13px;\n    --jl-font-md: 14px;\n    --jl-font-lg: 16px;\n    --jl-font-xl: 20px;\n    --jl-font-2xl: 28px;\n\n    --jl-text: #0b0b0c;\n    --jl-text-2: #3a3f47;\n    /* Secondary text: 6.2:1 on white. */\n    --jl-muted: #5b616b;\n    /* Icons and decorations only: 3.2:1 on white is enough for them, not for text. */\n    --jl-faint: #8a9099;\n\n    --jl-bg: #ffffff;\n    --jl-surface: #ffffff;\n    --jl-surface-2: #f7f8f9;\n    --jl-surface-3: #eef0f2;\n    --jl-code-bg: #f0f2f4;\n    --jl-line: #e6e8eb;\n    --jl-line-soft: #eef0f2;\n    --jl-line-strong: #d5d9de;\n\n    /* The SyWare logo's blue: marks, focus rings, progress. 3.8:1 on white: enough for shapes, never for text. */\n    --jl-brand: #0e88d3;\n    /* The same hue, deep enough to carry text: buttons, links, the selection. 5.2:1 on white. */\n    --jl-accent: #0c72b0;\n    --jl-accent-strong: #095a8b;\n    --jl-accent-soft: #e9f4fb;\n    --jl-accent-line: #b7dbf2;\n    --jl-on-accent: #ffffff;\n\n    --jl-ok: #17784a;\n    --jl-ok-soft: #ecf6f0;\n    --jl-warn: #9a5b00;\n    --jl-warn-soft: #fcf4e6;\n    --jl-danger: #b42318;\n    --jl-danger-soft: #fdf0ef;\n    --jl-on-danger: #ffffff;\n    --jl-info: #0c72b0;\n    --jl-info-soft: #e9f4fb;\n\n    /* Code: the accent for keywords, quiet colours from the same family for the rest. */\n    --jl-code-keyword: #0c72b0;\n    --jl-code-tag: #095a8b;\n    --jl-code-attribute: #5b48c8;\n    --jl-code-string: #17784a;\n    --jl-code-number: #9a5b00;\n    --jl-code-function: #3d5a80;\n    --jl-code-property: #127a72;\n    --jl-code-comment: #8a9099;\n\n    --jl-radius-xs: 6px;\n    --jl-radius-sm: 8px;\n    --jl-radius: 10px;\n    --jl-radius-lg: 12px;\n    --jl-radius-xl: 20px;\n    --jl-radius-pill: 999px;\n\n    /* Spacing: a 4px grid, for the layouts pages build around the components. */\n    --jl-space-1: 4px;\n    --jl-space-2: 8px;\n    --jl-space-3: 12px;\n    --jl-space-4: 16px;\n    --jl-space-5: 20px;\n    --jl-space-6: 24px;\n    --jl-space-8: 32px;\n    --jl-space-10: 40px;\n    --jl-space-12: 48px;\n    --jl-space-16: 64px;\n\n    --jl-control-sm: 30px;\n    --jl-control-md: 36px;\n    --jl-control-lg: 44px;\n    /* The text people type in fields. */\n    --jl-control-font: var(--jl-font-md);\n\n    /* The widest a page gets: a form, most pages, and the tables and grids that need the room. */\n    --jl-page-form: 720px;\n    --jl-page-standard: 1120px;\n    --jl-page-wide: 1400px;\n\n    /* Flat: lines separate; only what floats (menus, dialogs, toasts) casts a shadow. */\n    --jl-shadow-sm: 0 1px 2px rgb(11 11 12 / 0.05);\n    --jl-shadow: 0 6px 16px -6px rgb(11 11 12 / 0.12);\n    --jl-shadow-lg: 0 18px 44px -14px rgb(11 11 12 / 0.22);\n    --jl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jl-brand) 35%, transparent);\n    --jl-scrim: rgb(11 11 12 / 0.38);\n\n    --jl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);\n    --jl-fast: 120ms;\n    --jl-slow: 240ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme=\"light\"]) {\n      color-scheme: dark;\n      --jl-text: #eceef1;\n      --jl-text-2: #c3c8cf;\n      --jl-muted: #959ca6;\n      --jl-faint: #6b727c;\n      --jl-bg: #0f1113;\n      --jl-surface: #0f1113;\n      --jl-surface-2: #16191c;\n      --jl-surface-3: #1d2125;\n      --jl-code-bg: #1d2125;\n      --jl-line: #262a2f;\n      --jl-line-soft: #1f2327;\n      --jl-line-strong: #343a41;\n      --jl-brand: #1a9be0;\n      --jl-accent: #3ea6e8;\n      --jl-accent-strong: #6cc0f2;\n      --jl-accent-soft: #0f2a3b;\n      --jl-accent-line: #1e4a66;\n      --jl-on-accent: #04131c;\n      --jl-ok: #4cc38a;\n      --jl-ok-soft: #10261c;\n      --jl-warn: #e5a54b;\n      --jl-warn-soft: #2a2012;\n      --jl-danger: #f0786c;\n      --jl-danger-soft: #3a1a17;\n      --jl-on-danger: #1c0604;\n      --jl-info: #3ea6e8;\n      --jl-info-soft: #0f2a3b;\n      --jl-code-keyword: #3ea6e8;\n      --jl-code-tag: #6cc0f2;\n      --jl-code-attribute: #a99bf0;\n      --jl-code-string: #4cc38a;\n      --jl-code-number: #e5a54b;\n      --jl-code-function: #8fb0d6;\n      --jl-code-property: #4fc1b5;\n      --jl-code-comment: #6b727c;\n      --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n      --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n      --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n      --jl-scrim: rgb(0 0 0 / 0.55);\n    }\n  }\n\n  /* Dark: the same blue, lifted to read on a dark ground, with dark text on the buttons. */\n  [data-theme=\"dark\"] {\n    color-scheme: dark;\n    --jl-text: #eceef1;\n    --jl-text-2: #c3c8cf;\n    --jl-muted: #959ca6;\n    --jl-faint: #6b727c;\n    --jl-bg: #0f1113;\n    --jl-surface: #0f1113;\n    --jl-surface-2: #16191c;\n    --jl-surface-3: #1d2125;\n    --jl-code-bg: #1d2125;\n    --jl-line: #262a2f;\n    --jl-line-soft: #1f2327;\n    --jl-line-strong: #343a41;\n    --jl-brand: #1a9be0;\n    --jl-accent: #3ea6e8;\n    --jl-accent-strong: #6cc0f2;\n    --jl-accent-soft: #0f2a3b;\n    --jl-accent-line: #1e4a66;\n    --jl-on-accent: #04131c;\n    --jl-ok: #4cc38a;\n    --jl-ok-soft: #10261c;\n    --jl-warn: #e5a54b;\n    --jl-warn-soft: #2a2012;\n    --jl-danger: #f0786c;\n    --jl-danger-soft: #3a1a17;\n    --jl-on-danger: #1c0604;\n    --jl-info: #3ea6e8;\n    --jl-info-soft: #0f2a3b;\n    --jl-code-keyword: #3ea6e8;\n    --jl-code-tag: #6cc0f2;\n    --jl-code-attribute: #a99bf0;\n    --jl-code-string: #4cc38a;\n    --jl-code-number: #e5a54b;\n    --jl-code-function: #8fb0d6;\n    --jl-code-property: #4fc1b5;\n    --jl-code-comment: #6b727c;\n    --jl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --jl-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);\n    --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);\n    --jl-scrim: rgb(0 0 0 / 0.55);\n  }\n\n  /*\n   * Touch screens: controls a finger can hit (44px for most), and field text phones do not zoom into when it takes\n   * the focus (16px). Themed parts of a page re-declare the sizes, so they take these too.\n   */\n  @media (pointer: coarse) {\n    :root,\n    [data-theme=\"light\"],\n    [data-theme=\"dark\"] {\n      --jl-control-sm: 36px;\n      --jl-control-md: 44px;\n      --jl-control-lg: 48px;\n      --jl-control-font: 16px;\n    }\n  }\n}\n";
 export { tokens_default as default };

package/dist/templates/jl-app-shell.css_raw.js

@@ -1,3 +1,3 @@
 // src/templates/jl-app-shell.css?raw
-var jl_app_shell_default = ":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  container: jl-app-shell / inline-size;\n  --header-height: 56px;\n  --drawer-width: min(300px, 86%);\n}\n\n.shell {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"top top top\" auto\n    \"nav main aside\" minmax(0, 1fr)\n    / auto minmax(0, 1fr) auto;\n  height: 100%;\n  overflow: hidden;\n  background: var(--jl-bg);\n  color: var(--jl-text);\n}\n\n.top {\n  grid-area: top;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: var(--header-height);\n  padding: 0 16px;\n  border-bottom: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-header])) .top {\n  display: none;\n}\n\n::slotted([slot=\"header\"]) {\n  flex: 1;\n  min-width: 0;\n}\n\n.menu {\n  display: none;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--jl-control-md);\n  height: var(--jl-control-md);\n  margin-left: -8px;\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.menu:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.nav {\n  grid-area: nav;\n  min-height: 0;\n  overflow-y: auto;\n  border-right: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n.nav:focus-visible {\n  box-shadow: none;\n}\n\n:host(:not([has-nav])) .nav {\n  display: none;\n}\n\n.main {\n  grid-area: main;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.aside {\n  grid-area: aside;\n  min-height: 0;\n  overflow-y: auto;\n  border-left: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-aside])) .aside {\n  display: none;\n}\n\n.scrim {\n  display: none;\n}\n\n/* Narrow: the sidebar slides over the content as a drawer, the menu button opens it, the panel steps aside. */\n@container jl-app-shell (width < 960px) {\n  .shell {\n    grid-template:\n      \"top\" auto\n      \"main\" minmax(0, 1fr)\n      / minmax(0, 1fr);\n  }\n\n  :host([has-nav]) .top {\n    display: flex;\n  }\n\n  :host([has-nav]) .menu {\n    display: inline-flex;\n  }\n\n  .nav {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 2;\n    max-width: var(--drawer-width);\n    box-shadow: var(--jl-shadow-lg);\n    transform: translateX(-100%);\n    visibility: hidden;\n    transition:\n      transform var(--jl-slow) var(--jl-ease),\n      visibility 0s linear var(--jl-slow);\n  }\n\n  :host([nav-open]) .nav {\n    transform: none;\n    visibility: visible;\n    transition: transform var(--jl-slow) var(--jl-ease);\n  }\n\n  .scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    display: block;\n    background: var(--jl-scrim);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--jl-slow) var(--jl-ease);\n  }\n\n  :host([nav-open]) .scrim {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .aside {\n    display: none;\n  }\n}\n";
+var jl_app_shell_default = ":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  container: jl-app-shell / inline-size;\n  --header-height: 56px;\n  --drawer-width: min(300px, 86%);\n}\n\n.shell {\n  position: relative;\n  display: grid;\n  grid-template:\n    \"top top top\" auto\n    \"nav main aside\" minmax(0, 1fr)\n    / auto minmax(0, 1fr) auto;\n  height: 100%;\n  overflow: hidden;\n  background: var(--jl-bg);\n  color: var(--jl-text);\n}\n\n.top {\n  grid-area: top;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: var(--header-height);\n  padding: 0 16px;\n  border-bottom: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-header])) .top {\n  display: none;\n}\n\n::slotted([slot=\"header\"]) {\n  flex: 1;\n  min-width: 0;\n}\n\n.menu {\n  display: none;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--jl-control-md);\n  height: var(--jl-control-md);\n  margin-left: -8px;\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.menu:hover {\n  background: var(--jl-surface-3);\n  color: var(--jl-text);\n}\n\n.nav {\n  grid-area: nav;\n  min-height: 0;\n  overflow-y: auto;\n  border-right: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n.nav:focus-visible {\n  box-shadow: none;\n}\n\n:host(:not([has-nav])) .nav {\n  display: none;\n}\n\n/* Its own stacking context: what the page lifts with z-index (a sticky bar) stays under the drawer and its scrim. */\n.main {\n  grid-area: main;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  isolation: isolate;\n}\n\n.aside {\n  grid-area: aside;\n  min-height: 0;\n  overflow-y: auto;\n  border-left: 1px solid var(--jl-line);\n  background: var(--jl-surface);\n}\n\n:host(:not([has-aside])) .aside {\n  display: none;\n}\n\n/* The bottom bar is for narrow screens: wide ones have the sidebar. */\n.tabs {\n  display: none;\n}\n\n.scrim {\n  display: none;\n}\n\n/* Narrow: the sidebar slides over the content as a drawer, the menu button opens it, the panel steps aside. */\n@container jl-app-shell (width < 960px) {\n  .shell {\n    grid-template:\n      \"top\" auto\n      \"main\" minmax(0, 1fr)\n      \"tabs\" auto\n      / minmax(0, 1fr);\n  }\n\n  :host([has-tabs]) .tabs {\n    display: block;\n    grid-area: tabs;\n  }\n\n  :host([has-nav]) .top {\n    display: flex;\n  }\n\n  :host([has-nav]) .menu {\n    display: inline-flex;\n  }\n\n  .nav {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 2;\n    max-width: var(--drawer-width);\n    box-shadow: var(--jl-shadow-lg);\n    transform: translateX(-100%);\n    visibility: hidden;\n    transition:\n      transform var(--jl-slow) var(--jl-ease),\n      visibility 0s linear var(--jl-slow);\n  }\n\n  :host([nav-open]) .nav {\n    transform: none;\n    visibility: visible;\n    transition: transform var(--jl-slow) var(--jl-ease);\n  }\n\n  .scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    display: block;\n    background: var(--jl-scrim);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--jl-slow) var(--jl-ease);\n  }\n\n  :host([nav-open]) .scrim {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .aside {\n    display: none;\n  }\n}\n";
 export { jl_app_shell_default as default };

package/dist/templates/jl-app-shell.d.ts

@@ -2,7 +2,8 @@ import { JlElement } from '../base/jl-element';
 /**
  * The frame of an app: a top bar (`header`), a sidebar (`nav`), the main area (the default slot), which scrolls
  * on its own, and an optional panel on the right (`aside`). Narrower than 960 pixels, the sidebar becomes a drawer
- * over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), and the panel hides.
+ * over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), the panel hides, and
+ * a bar along the bottom shows (`tabs`, such as a `jl-tab-bar`, whose `more` opens the drawer).
  * It takes the height of its container: give that one a height (`100dvh` for a whole page).
  */
 export declare class JlAppShell extends JlElement {
@@ -27,11 +28,16 @@ export declare class JlAppShell extends JlElement {
     /** Whether the shell is narrow: the menu button shows only then. */
     private isNarrow;
     private onMenu;
+    /** The tab bar's "more": the other places are in the drawer. */
+    private onMore;
     private onKey;
     /** The drawer as people open and close it: says so. */
     private setNavOpen;
     private renderNavOpen;
     private renderInert;
-    /** What was slotted: empty areas take no room, and a `select` from the nav (a side nav's) closes the drawer. */
+    /**
+     * What was slotted: empty areas take no room, a `select` from the nav (a side nav's) closes the drawer, and a
+     * `more` from the tabs (a tab bar's) opens it.
+     */
     private renderSlots;
 }

package/dist/templates/jl-app-shell.js

@@ -15,7 +15,8 @@ var followsLink = (event) => event.composedPath().some((node) => node instanceof
 /**
 * The frame of an app: a top bar (`header`), a sidebar (`nav`), the main area (the default slot), which scrolls
 * on its own, and an optional panel on the right (`aside`). Narrower than 960 pixels, the sidebar becomes a drawer
-* over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), and the panel hides.
+* over the content, opened by a menu button in the top bar (or `nav-open`, or `toggleNav()`), the panel hides, and
+* a bar along the bottom shows (`tabs`, such as a `jl-tab-bar`, whose `more` opens the drawer).
 * It takes the height of its container: give that one a height (`100dvh` for a whole page).
 */
 var JlAppShell = class extends JlElement {
@@ -23,7 +24,10 @@ var JlAppShell = class extends JlElement {
 	events = this.useEvents();
 	/** Whether the drawer is open, on narrow screens; wide ones always show the sidebar. */
 	navOpen = this.useChange(false, (value) => this.renderNavOpen(value), { attribute: "nav-open" });
-	_state = { navListeners: new AbortController() };
+	_state = {
+		navListeners: new AbortController(),
+		tabsListeners: new AbortController()
+	};
 	_resize = new ResizeObserver(() => this.renderInert());
 	_refs = this.useRefs((ref) => ({
 		aside: ref(".aside"),
@@ -33,7 +37,9 @@ var JlAppShell = class extends JlElement {
 		menu: ref(".menu"),
 		nav: ref(".nav"),
 		navSlot: ref("slot[name=\"nav\"]"),
-		scrim: ref(".scrim")
+		scrim: ref(".scrim"),
+		tabs: ref(".tabs"),
+		tabsSlot: ref("slot[name=\"tabs\"]")
 	}));
 	/** Opens or closes the drawer; `force` sets the state instead of flipping it. */
 	toggleNav(force) {
@@ -76,6 +82,11 @@ var JlAppShell = class extends JlElement {
 					attrs: { part: "aside" },
 					children: /* @__PURE__ */ jsx("slot", { name: "aside" })
 				}),
+				/* @__PURE__ */ jsx("div", {
+					class: "tabs",
+					attrs: { part: "tabs" },
+					children: /* @__PURE__ */ jsx("slot", { name: "tabs" })
+				}),
 				/* @__PURE__ */ jsx("div", { class: "scrim" })
 			]
 		});
@@ -95,12 +106,14 @@ var JlAppShell = class extends JlElement {
 		for (const slot of [
 			this._refs.headerSlot,
 			this._refs.navSlot,
-			this._refs.asideSlot
+			this._refs.asideSlot,
+			this._refs.tabsSlot
 		]) this.on(slot, "slotchange", () => this.renderSlots());
 	}
 	onDisconnect() {
 		this._resize.disconnect();
 		this._state.navListeners.abort();
+		this._state.tabsListeners.abort();
 	}
 	/** Whether the shell is narrow: the menu button shows only then. */
 	isNarrow() {
@@ -111,6 +124,11 @@ var JlAppShell = class extends JlElement {
 		this.setNavOpen(opening);
 		if (opening) this._refs.nav.focus();
 	}
+	/** The tab bar's "more": the other places are in the drawer. */
+	onMore() {
+		this.setNavOpen(true);
+		this._refs.nav.focus();
+	}
 	onKey(event) {
 		if (event.key !== "Escape" || !this.navOpen.get() || !this.isNarrow()) return;
 		event.preventDefault();
@@ -132,11 +150,20 @@ var JlAppShell = class extends JlElement {
 		const covered = this.navOpen.get() && this.isNarrow();
 		this._refs.main.inert = covered;
 		this._refs.aside.inert = covered;
+		this._refs.tabs.inert = covered;
 	}
-	/** What was slotted: empty areas take no room, and a `select` from the nav (a side nav's) closes the drawer. */
+	/**
+	* What was slotted: empty areas take no room, a `select` from the nav (a side nav's) closes the drawer, and a
+	* `more` from the tabs (a tab bar's) opens it.
+	*/
 	renderSlots() {
 		this.reflect("has-header", this._refs.headerSlot.assignedElements().length > 0);
 		this.reflect("has-aside", this._refs.asideSlot.assignedElements().length > 0);
+		const tabElements = this._refs.tabsSlot.assignedElements();
+		this.reflect("has-tabs", tabElements.length > 0);
+		this._state.tabsListeners.abort();
+		this._state.tabsListeners = new AbortController();
+		for (const element of tabElements) element.addEventListener("more", () => this.onMore(), { signal: this._state.tabsListeners.signal });
 		const navElements = this._refs.navSlot.assignedElements();
 		this.reflect("has-nav", navElements.length > 0);
 		this._state.navListeners.abort();

package/dist/templates/jl-page.css_raw.js

@@ -0,0 +1,3 @@
+// src/templates/jl-page.css?raw
+var jl_page_default = ":host {\n  display: block;\n  container-type: inline-size;\n  --page-width: var(--jl-page-standard);\n}\n\n:host([width=\"form\"]) {\n  --page-width: var(--jl-page-form);\n}\n\n:host([width=\"wide\"]) {\n  --page-width: var(--jl-page-wide);\n}\n\n:host([width=\"full\"]) {\n  --page-width: none;\n}\n\n.page {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: var(--jl-space-6);\n  max-width: var(--page-width);\n  margin: 0 auto;\n  padding: var(--jl-space-8) var(--jl-space-10) var(--jl-space-12);\n}\n\n/* A grid's items grow to their content otherwise: a row of chips would widen the page. */\n::slotted(*) {\n  min-width: 0;\n}\n\n.back {\n  margin-left: -8px;\n}\n\n@container (max-width: 720px) {\n  .page {\n    padding: var(--jl-space-6) var(--jl-space-4) var(--jl-space-12);\n  }\n}\n";
+export { jl_page_default as default };

package/dist/templates/jl-page.d.ts

@@ -0,0 +1,49 @@
+import { JlElement } from '../base/jl-element';
+import type { PageWidth } from '../types/jl-page.types';
+export declare const PAGE_WIDTHS: readonly PageWidth[];
+/**
+ * A page of an app: its header (a back link named after the page it leads to, the heading, a sentence on what the
+ * page is for or the facts that identify its subject, the status, the actions), then the content, centred at one of
+ * four widths. With `app-name`, it also names the browser tab after its heading: "Order #3 · swstock".
+ */
+export declare class JlPage extends JlElement {
+    static readonly selector = "jl-page";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        back: 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;
+    }>>;
+    /** `form` for one column of fields, `standard` for most pages, `wide` for tables and grids, `full` for the rest. */
+    readonly width: Readonly<Readonly<{
+        get(): PageWidth;
+        set(setter: ((prevState: PageWidth) => PageWidth) | PageWidth): void;
+    }>>;
+    /** Where the back link leads; no back link without it. */
+    readonly back: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The name of the page the back link leads to: "Orders". */
+    readonly backLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The app's name, after the heading in the browser tab. Without it, the page leaves the tab's title alone. */
+    readonly appName: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** The back link stays out of the header's breadcrumb slot without an address, so the header takes no room for it. */
+    private renderBack;
+    private renderTitle;
+}

package/dist/templates/jl-page.js

@@ -0,0 +1,102 @@
+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 { registerIcons } from "../lib/icons.js";
+import { setOrRemove } from "../lib/dom.js";
+import { JlButton } from "../atoms/jl-button.js";
+import { JlPageHeader } from "../organisms/jl-page-header.js";
+import jl_page_default from "./jl-page.css_raw.js";
+import { css } from "@jadis/core";
+import { ArrowLeft } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/templates/jl-page.tsx
+registerIcons({ "arrow-left": ArrowLeft });
+define(JlPageHeader);
+var PAGE_WIDTHS = [
+	"standard",
+	"form",
+	"wide",
+	"full"
+];
+var BREADCRUMB_SLOT = "breadcrumb";
+var DEFAULT_BACK_LABEL = "Back";
+var TITLE_SEPARATOR = " · ";
+/**
+* A page of an app: its header (a back link named after the page it leads to, the heading, a sentence on what the
+* page is for or the facts that identify its subject, the status, the actions), then the content, centred at one of
+* four widths. With `app-name`, it also names the browser tab after its heading: "Order #3 · swstock".
+*/
+var JlPage = class extends JlElement {
+	static selector = "jl-page";
+	events = this.useEvents();
+	heading = this.useChange("", (value) => {
+		this._refs.header.heading.set(value);
+		this.renderTitle();
+	}, { attribute: "heading" });
+	description = this.useChange("", (value) => this._refs.header.description.set(value), { attribute: "description" });
+	/** `form` for one column of fields, `standard` for most pages, `wide` for tables and grids, `full` for the rest. */
+	width = this.useChange("standard", (value) => this.reflect("width", value), {
+		attribute: "width",
+		parse: oneOf(PAGE_WIDTHS, "standard")
+	});
+	/** Where the back link leads; no back link without it. */
+	back = this.useChange("", () => this.renderBack(), { attribute: "back" });
+	/** The name of the page the back link leads to: "Orders". */
+	backLabel = this.useChange("", () => this.renderBack(), { attribute: "back-label" });
+	/** The app's name, after the heading in the browser tab. Without it, the page leaves the tab's title alone. */
+	appName = this.useChange("", () => this.renderTitle(), { attribute: "app-name" });
+	_refs = this.useRefs((ref) => ({
+		back: ref(".back"),
+		header: ref("jl-page-header")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "page",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsxs("jl-page-header", { children: [
+				/* @__PURE__ */ jsx(JlButton, {
+					class: "back",
+					variant: "ghost",
+					size: "sm",
+					icon: "arrow-left"
+				}),
+				/* @__PURE__ */ jsx("slot", {
+					name: "breadcrumb",
+					slot: "breadcrumb"
+				}),
+				/* @__PURE__ */ jsx("slot", {
+					name: "actions",
+					slot: "actions"
+				}),
+				/* @__PURE__ */ jsx("slot", {
+					name: "meta",
+					slot: "meta"
+				})
+			] }), /* @__PURE__ */ jsx("slot", {})]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_page_default}`;
+	}
+	onConnect() {
+		this.renderTitle();
+		this._refs.back.events.register("press", () => this.events.emit("back"));
+	}
+	/** The back link stays out of the header's breadcrumb slot without an address, so the header takes no room for it. */
+	renderBack() {
+		const back = this._refs.back;
+		const href = this.back.get();
+		back.href.set(href);
+		back.label.set(this.backLabel.get() || DEFAULT_BACK_LABEL);
+		setOrRemove(back, "slot", href === "" ? "" : BREADCRUMB_SLOT);
+	}
+	renderTitle() {
+		const app = this.appName.get();
+		if (app === "" || !this.isConnected) return;
+		const heading = this.heading.get();
+		document.title = heading === "" ? app : `${heading}${TITLE_SEPARATOR}${app}`;
+	}
+};
+JlPage.register();
+export { JlPage, PAGE_WIDTHS };

package/dist/tokens.css

@@ -84,6 +84,13 @@
     --jl-control-sm: 30px;
     --jl-control-md: 36px;
     --jl-control-lg: 44px;
+    /* The text people type in fields. */
+    --jl-control-font: var(--jl-font-md);
+
+    /* The widest a page gets: a form, most pages, and the tables and grids that need the room. */
+    --jl-page-form: 720px;
+    --jl-page-standard: 1120px;
+    --jl-page-wide: 1400px;
 
     /* Flat: lines separate; only what floats (menus, dialogs, toasts) casts a shadow. */
     --jl-shadow-sm: 0 1px 2px rgb(11 11 12 / 0.05);
@@ -185,4 +192,19 @@
     --jl-shadow-lg: 0 18px 44px -12px rgb(0 0 0 / 0.7);
     --jl-scrim: rgb(0 0 0 / 0.55);
   }
+
+  /*
+   * Touch screens: controls a finger can hit (44px for most), and field text phones do not zoom into when it takes
+   * the focus (16px). Themed parts of a page re-declare the sizes, so they take these too.
+   */
+  @media (pointer: coarse) {
+    :root,
+    [data-theme="light"],
+    [data-theme="dark"] {
+      --jl-control-sm: 36px;
+      --jl-control-md: 44px;
+      --jl-control-lg: 48px;
+      --jl-control-font: 16px;
+    }
+  }
 }

package/dist/types/jl-badge.types.d.ts

@@ -0,0 +1,11 @@
+import type { Tone } from './options.types';
+/**
+ * How one state of something shows as a badge: its word, its tone, its icon, and a sentence on what it means. One
+ * exhaustive map per kind of thing (`Record<OrderStatus, StatusLook>`) keeps every view saying a state the same way.
+ */
+export type StatusLook = {
+    label: string;
+    tone: Tone;
+    icon?: string;
+    hint?: string;
+};